时间戳

首页 > 解决方案 > 在 vue js 中的何处以及如何存储 API 端点？

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

问题描述

我正在使用vue-cli前端和lumen后端，我很好奇在 vue 中存储 API root-url 和端点的最佳实践是什么？

现在我在 API root-url 和端点的目录中有constants.js文件：src

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.jsand中很糟糕prod.env.js，最重要的事实是我不明白他们为什么这么说，为什么将这些数据保存在.env文件中很重要？或者也许还有其他更好的方法？

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

标签： httpvue.jsvuejs2web-frontend

解决方案

推荐使用 .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)

推荐阅读