一.技术栈（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里面获取到
})
就这，完结！
