在 vue js 中在哪里以及如何存储 API 端点?

Where and how to store API endpoints in vue js?

我在前端使用 vue-cli,在后端使用 lumen,我很好奇什么是存储 API root-[=43= 的最佳实践] 和 vue 中的端点?

现在我在 src 目录中有 constants.js 文件,其中 API root-url 和端点是这样的:

const BASE_URL = "http://localhost:8000"

export const AddLanguge = BASE_URL + "/api/languages"

当我需要例如在组件中实现添加语言功能时,我从 constants.js 导入所需的 API 端点,就像这样:

import { AddLanguge } from '@/constants'

然后使用axios发起请求

this.$http.post(AddLanguge, params).then(response => {
   if (response.status == 200) {
       this.addLanguage(response.data.data)
   } else {
       this.setHttpResponseDialog(response)
   }
}).catch(er => {
       this.setHttpResponseDialog("Error")
})

我搜索了这个问题,但没有明确的答案有人说:没关系

其他人说:你必须将那种数据存储在 dev.env.jsprod.env.js 中是很糟糕的,最重要的事实是我不明白他们为什么这么说,这是为什么将该数据保存在 .env 个文件中很重要吗?或者还有其他更好的方法吗?

你们能提供一个正确的答案和很好的解释吗?或者如果没有正确的答案,这取决于情况,我该如何决定哪种方式适合我的情况?

建议使用

.env 文件,因为根据环境您可能有不同的端点,也就是说您是 运行 使用 "npm run serve" 开发服务器还是使用 "npm run build" 构建生产环境。使用 .env 配置文件,它们成为环境变量,你不需要将它们硬编码到你的应用程序中,这只是最实际的事情。使用 Vue CLI 3,你将拥有

//.env.development 
VUE_APP_BASEURL = "http://localhost:8000"

并且在您的应用中,您可以使用它来访问它。

process.env.VUE_APP_BASEURL

我以前做的只是将基数放在一个变量中,然后连接其余部分。

const BASE_URL = process.env.VUE_APP_BASEURL

this.$http.post(BASE_URL + '/api/languages/', params)