vue + vue-router 实现动态切换代理（不同角色使用不同的请求地址）

一.技术栈（vue2 + vue-router + vue-cli3）

1.首先我们需要在项目中的vue.config.js文件里面配置多个代理

 devServer: {
    port: 8889, // 端口号
    disableHostCheck: true,
    proxy: {
      '/acceptor': {
        target: '你的请求地址（支持node全局变（process.env.VUE_APP_BASE_API））',
        changeOrigin: true, // 允许跨域
        ws: true, // 是否代理
        pathRewrite: {
          '^/acceptor': ''
        }
      },
      '/agent': {
        target: '你的请求地址（支持node全局变（process.env.VUE_APP_BASE_API））',
        changeOrigin: true, // 允许跨域
        ws: true, // 是否代理
        pathRewrite: {
          '^/agent': ''
        }
      },
      '/merchant': {
        target: '你的请求地址（支持node全局变（process.env.VUE_APP_BASE_API））',
        changeOrigin: true, // 允许跨域
        ws: true, // 是否代理
        pathRewrite: {
          '^/merchant': ''
        }
      }
    },
    // 全屏显示报错
    overlay: {
      warnings: false,
      errors: true
    }
  }

2.在项目中封装axios文件的js中动态根据不同角色修改baseurl

var base_url = ''
// Vue-ls插件，用来做localstorage存储  获取到角色名（通过不同的角色名使用不同的请求代理地址）
if (Vue.ls.get('role')) {
  base_url = `/${Vue.ls.get('role')}`
}
// 创建 axios 实例
const service = axios.create({
  baseURL: base_url, // api base_url
  timeout: 30000,
  validateStatus: status => {
    return status >= 200 && status < 600 && status !== 404
  } // 这样配置参数可以在response里面获取到
})

就这，完结！