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

Posted 2023-02-18

【中文标题】在 vue js 中的何处以及如何存储 API 端点？

【英文标题】：Where and how to store API endpoints in vue js?

【发布时间】：2019-04-18 21:04:50

【问题描述】：

我将vue-cli 用于前端，lumen 用于后端，我很好奇在 vue 中存储 API 根 URL 和端点的最佳实践是什么？

现在我在 src 目录中有 constants.js 文件，其中 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 文件？或者还有其他更好的方法吗？

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

【问题讨论】：

如果出于安全原因您的意思是“将它们存储在哪里”，那么这并不重要，因为您的安全性将在后端和处理请求中，而不是隐藏您的 api 路由。就像，您几乎应该能够向世界宣布您的 API 路由，并且使它们安全的是您如何处理人们戳 API 的方式，而不是隐藏 API。如果您的意思是从实际放置它们的角度来看，那么我会将它们放在 Vuex 商店中，可能在它自己的模块中。您不要将env 文件用于敏感数据，否则这只是您实用的问题。

How to set API path in vue.config.js for production?的可能重复

【参考方案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_APP_？当我有一个名为 VUE_DEV_API_ENDPOINT 的变量时，它不起作用（process.env.VUE_DEV_API_ENDPOINT 是 undefined），但是当我用 VUE_APP_DEV_API_ENDPOINT 替换它时，它就像 VUE_APP_API_ENDPOINT 一样起作用）

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

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