如何在 vue 中为外部后端 api 和 devserver api 设置 url

Question

我正在使用 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

开发上的 API 位于 127.0.0.1:1337

当我构建这个应用程序时，它应该在 axios 调用上使用 api.domain.com.br。

Answer 1

我会使用带有基本 url 变量的 env 文件

.env.development

VUE_APP_BASE_URL=http://127.0.0.1:1337

.env.production

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 文档。