vue多环境代理配置后台：多人协作模式下，修改代理比较麻烦，开发者修改vue.config.js文件提交即可它。第一，容易引起矛盾。第二，代理错误容易发生，需要检查。而且现在微服务盛行，在生产环境有网关配置的时候不会报错，但是本地调试会很麻烦。如果修改代理地址，则需要同步修改代理中的地址，非常麻烦且容易出错。解决方法：1、开发时定义常量js文件，如constants.js。用户存储需要代理的每个服务的服务名称。letapi=""letloginServer="/loginServer"letbusinessServer="/businessServe"if(process.env.NODE_ENV=="development"){api="/api"loginServer=api+LoginServerbusinessServer=api+businessServer}export{loginServer,businessServer}其中api在代理规则中配置，loginServer为服务名，可根据业务需要替换。在实际业务中，可以使用import{loginServer}from'constants'functionlogin(params){returnaxios.post(loginServer+"/login",params)}其中loginServer是服务名，login是方法名，params是参数。在vue.config.js中配置代理modules.exports={publicPath:"/",devServer:{port:8080,proxy:{'/api/loginServer':{target:"http://localhost:8080",ws:true,changeOrigin:true,pathRewrite:{'^/api':'/'}},'/api/businessServer':{target:"http://localhost:8081",ws:true,changeOrigin:true,pathRewrite:{'^/api':'/'}}}}}这个配置可以满足需求，但是会出现多人改vue.config.js的情况，导致出现上述错误。解决方法：vue中提供--mode模式，提供.env.local等文件。这个文件会被git忽略，根据当前mode设置的值可以找到环境变量配置，比如--mode=dev,then.env.dev.local或.env.dev等文件中的配置会生效，而.local文件会被git忽略，所以我们使用这个，在package.json中设置--mode，并添加脚本在npmrunserve:{"serve":"vue-cli-serviceserve--mode=dev"}项目根目录下的jianli.env.dev.local文件中，在文件中添加如下键值对（此文件中只接受键值对）。env.dev.localloginServerURL=http://localhost:8080businessServerURL=http://localhost:8081当然可以根据不同的模式创建不同的本地文件。在vue.config.js中重写modules.exports=比如env.prod.local{publicPath:"/",devServer:{port:8080,proxy:{'/api/loginServer':{target:process.env.loginServerURL?process.env.loginServerURL:"httpL//localhost:8080",ws:true,changeOrigin:true,pathRewrite:{'^/api':'/'}},'/api/businessServer':{target:process.env.loginServerURL?process.env.businessServerURL:"http://localhost:8081",ws:true,changeOrigin:true,pathRewrite:{'^/api':'/'}}}}}这样可以根据不同的环境配置不同的地址
