Vue-cli 3.0 中如何配置axios跨域多个代理？

Vue-cli 3.0 中如何配置axios跨域多个代理？

1、vue.config.js

devServer: {
  open: true,
  port: 8081,
  proxy: {
          //匹配/dev-api开头的请求
          [process.env.VUE_APP_BASE_API]: {
              //目标服务器，代理访问到https://localhost:8080
              target: process.env.VUE_APP_SERVICE_URL,
              // 开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，
              // 并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
              changOrigin: true, //开启代理
              pathRewrite: {
                  // 会将 /dev-api 替换为 '',也就是 /dev-api 会移除，
                  // 如 /dev-api/db.json 代理到 https://localhost:8080/db.json
                  // '^/dev-api':"",
                  ["^" + process.env.VUE_APP_BASE_API]: ""
              }
          },
          //匹配/list-api开头的请求
          [process.env.VUE_APP_LIST_API]: {
              //目标服务器，代理访问到https://localhost:8080
              target: process.env.VUE_APP_LIST_URL,
              // 开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，
              // 并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
              changOrigin: true, //开启代理
              pathRewrite: {
                  // 会将 /list-api 替换为 '',也就是 /list-api 会移除，
                  // 如 /list-api/db.json 代理到 https://localhost:8080/db.json
                  // '^/list-api':"",
                  ["^" + process.env.VUE_APP_LIST_API]: ""
              }
          },
      }
},

2、.env

# 使用 VUE_APP_ 开头的变量会被 webpack 自动加载
# 定义请求的基础URL, 方便跨域请求时使用
​
VUE_APP_BASE_API = '/dev-api'
VUE_APP_LIST_API = '/list-api'
​
# 接口服务地址， 以你自已的为主
# 可更改为你自已配置的 Easy-Mock 接口服务地址
# http://120.53.31.103:84/api
​
VUE_APP_SERVICE_URL = 'http://120.53.31.103:84/api/'
VUE_APP_LIST_URL = 'http://120.27.63.9:8080/'

3、api

 export function test1(data) {
  return request({
    url: 'dev-api/test1',
    method: 'post',
    data,
  });
}
export function test2(data) {
  return request({
    url: 'list-api/test2',
    method: 'post',
    data,
  });
}