我正在使用 Vue 设置应用程序,并希望创建一个 API 服务,其中生产应指向 api.domain.com.br,而开发应指向 127.0.0.1:1337。
我的 API 使用 axios 发出如下请求:
axios.post('/api/v2/plan', plan)
我的 vue.config.js 有一个这样的代理解决方案:
devServer: {
proxy: {
'/api': {
target: 'http://127.0.0.1:1337',
ws: true,
changeOrigin: true
},
}
},
我可以从 axios 创建一个服务并在 api 上导入它:
import axios from 'axios';
const client = axios.create({
baseURL: 'https://api.domain.com.br'
});
export default client;
但是它不适用于在 vue.config.js 上设置的开发代理
综合:
生产应用程序位于 app.domain.com.br
生产中的 Api 位于 api.domain.com.br
开发应用程序位于 127.0.0.1:8080
dev 上的 Api 位于 127.0.0.1:1337
当我构建这个应用程序时,它应该在 axios 调用上使用 api.domain.com.br。
最佳答案
我会使用一个带有基本 url 变量的 env 文件
.env.development
VUE_APP_BASE_URL=http://127.0.0.1:1337
.env.生产
VUE_APP_BASE_URL=https://api.domain.com.br
然后在你的 axios 中
const client = axios.create({
baseURL: process.env.VUE_APP_BASE_URL
});
.env.development
为命令 vue-cli-service serve
自动加载.env.production
为命令 vue-cli-service build
自动加载您还可以使用在 vue cli 项目中默认为 gitignored 的本地 .env 文件。见 vue's文档以获取更多信息。
关于vue.js - 如何在 vue 中为外部后端 api 和 devserver api 设置 url,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57468770/