vue添加多axios 多环境请求

1. 配置vue.config.js

devServer: {
    host: ‘0.0.0.0‘,
    port: port,
    proxy: {
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        target: `http://172.16.13.94:9005`,
        // target: `http://localhost:9005`,
        changeOrigin: true,
        pathRewrite: {
          [‘^‘ + process.env.VUE_APP_BASE_API]: ‘‘
        }
      },
      //匹配/list-api开头的请求
      [process.env.VUE_APP_LIST_API]: {
        //目标服务器，代理访问到 http://172.16.13.202:8080/BESTest
        target: `http://172.16.13.202:8080/BESTest`,
        // 开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，
        // 并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
        changOrigin: true, //开启代理
        pathRewrite: {
          // 会将 /list-api 替换为 ‘‘,也就是 /list-api 会移除，
          // 如 /list-api/db.json 代理到 http://172.16.13.202:8080/BESTest/db.json
          // ‘^/list-api‘:"",
          ["^" + process.env.VUE_APP_LIST_API]: ‘‘
        }
      },
    },
    disableHostCheck: true
  },

2. 配置 env

VUE_APP_BASE_API = ‘/dev-api‘
VUE_APP_LIST_API = ‘/bes‘

3.配置api

import axios from ‘axios‘
axios.defaults.headers[‘Content-Type‘] = ‘application/json;charset=utf-8‘
// 创建axios实例
const service = axios.create({
  // axios中请求配置有baseURL选项，表示请求URL公共部分
  baseURL: process.env.VUE_APP_LIST_API,
  // 超时
  timeout: 10000
})

/**
 * @param query
 */
export function getLightList(query) {
  return service({
    url: ‘/api/v1.0/getLightList‘,
    method: ‘get‘,
    params: query
  })
}

vue添加多axios 多环境请求

原文：https://www.cnblogs.com/GraceYang/p/14188781.html