如何在 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

dev 上的 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.生产

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