Vue.js：服务器端应用程序的全局基 URL

Question

在我正在开发的一个小型 Vue 应用程序中，有这样的代码：

this.axios.post('https://localhost:8000/api/auth/login',.......)。

https://localhost:8000部署到服务器后，需求会发生变化，因为应用程序的服务器端将托管在不同的 IP 地址/端口。我想定义类似 a 的东西BASE_URL，可以从配置文件中读取或类似的东西，这意味着上面的代码将更改为类似的东西：

this.axios.post(`${BASE_URL}/api/auth/login`)

在 Vue.js 中执行此操作的最佳方法是什么？最初，baseUrl听起来很有希望，但这似乎不是我所需要的。

Answer 1

您可以使用环境变量来定义您的基本 url。例如，在项目的基础上创建文件.env.development和.env.Production ：

VUE_APP_BASE_URL=https://localhost:8000

然后，您可以将基本 url 指定为 axios 配置的一部分：

axios.defaults.baseURL = process.env.VUE_APP_BASE_URL

vue 应用程序将根据您使用的构建模式而变化，例如npm run build -- --mode development或npm run build -- --mode production