在Vue.js中如何存储API端点以及存储的位置是什么？

Question

我正在使用 vue-cli 来构建前端，使用 lumen 来构建后端，并且我想知道在 vue 中存储 API 根 URL 和 endpoints 的最佳实践是什么？

现在我有一个 constants.js 文件在 src 目录中，其中 API 根 URL 和 endpoints 如下所示：

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

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

当我需要在组件中实现添加语言功能时，例如，我会从constants.js中导入所需的API端点，代码如下：

当我需要在组件中添加语言功能时，例如，我会将所需的API端点从constants.js中导入，代码如下：

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文件中保存数据很重要？或者可能还有其他更好的方法吗？

你们能否提供一个正确的答案并给出良好的解释，或者如果没有正确的答案，并且它取决于情况，如何决定哪种方法适合我的情况？

- Nika Kurashvili

---

如果你说的是出于安全考虑，存储在哪里并不重要，因为你的安全性将会在后端处理请求时得到保障，而不是隐藏你的 API 路径。你应该能够向世界宣布你的 API 路径，并且让其变得更加安全的是你如何处理人们对 API 进行探测的问题，而不是隐藏 API 。如果你是从实际角度考虑它们应该放在哪里，那么我会把它们放在一个自己的 Vuex 模块中。你不应该使用 env 文件来存储敏感数据，否则只是取决于你的实际需求。 - Simon Hyll

可能是如何在vue.config.js中设置生产环境的API路径？的重复问题。 - YakovL

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)

- artoju

---

需要使用前缀 VUE_APP_ 吗？当我有一个名为 VUE_DEV_API_ENDPOINT 的变量时，它不起作用（process.env.VUE_DEV_API_ENDPOINT 是 undefined），但是当我将其替换为 VUE_APP_DEV_API_ENDPOINT 时，它就像 VUE_APP_API_ENDPOINT 一样正常工作。 - YakovL

是的，前缀是必需的：https://cli.vuejs.org/guide/mode-and-env.html#environment-variables - YakovL

@YakovL 是的，确实需要。在这里说明了 https://cli.vuejs.org/guide/mode-and-env.html#environment-variables "请注意，只有以 VUE_APP_ 开头的变量才会使用 webpack.DefinePlugin 静态嵌入到客户端捆绑包中。" - artoju

要使用Vite和Vue.js从**.env**文件中公开一个变量，你必须使用VITE_前缀来定义.env变量，然后你可以在Vue.js应用的任何地方访问它们：import.meta.env.VITE_YOUR_VAR - undefined