Question

我将vue-cli用于前端，将lumen用于后端，并且我对在vue中存储API根URL和端点的最佳实践感到好奇吗？

现在我在constants.js目录中有src个文件，其中的API根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.js和prod.env.js中是很糟糕的，这里最重要的事实是我不明白他们为什么这么说，为什么对将该数据保存在.env文件中？也许还有其他更好的方法？

你们能提供正确的答案并给出正确的解释吗？或者如果没有正确的答案，并且取决于情况，我该如何确定哪种方式适合我的情况？

Answer 1

推荐使用

.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)

在vue js中将API端点存储在何处以及如何存储？

1 个答案: