vue多api端口反向代理

• 需求：项目有多个服务器地址，都需要做代理
  
  直接把测试和正式的接口地址写到 .env.development 和 .env,production里，通过process.env.VUE_APP_URL 这个可以获取到你定义的接口的变量值，VUE_APP_URL 这个东西是你自定义的在.env.development这个文件里，格式为VUE_APP_名字 = " http://172.0.0.1 " 赋值为你的公共接口地址，这是只有一个公共接口的情况，很好处理
• 在vue.confing.js 里面进行代理配置
  我的代理api比较多 所以先生成一个对象
  
  生成的对象

proxyTable:{
	'/ems': {
	    target: 'http://172.0.0.228:3103/ems',// 需要访问的真实地址
	    changeOrigin: true,//开启代理
	    ws: true,
	    secure: false,      // 如果是https接口，需要配置这个参数为true
	    pathRewrite: { '^/ems': 'ems' } // 重定向的地址
	  },
	'/KTTiming': {
	    target: 'http://172.0.0.228:9999/ding',  
	    changeOrigin: true,
	    ws: true,
	    pathRewrite: { '^/KTTiming': '' } 
	  }
}

• 在vue.confing.js找到devServer对象 将上面生成的对象赋给 proxy
• 在axios请求
  写url时侯直接写.env,production文件里配置的变量名
  例如

我需要访问的接口是：http://172.0.0.228:3103/ems/v1，第一行 ‘/ems‘
是一个标识，告诉它只代理接口里面有/ems这个字段的接口，我的目标服务器就是http://172.0.0.228:3103，即target定义的pathRewrite重定向
‘^/ems’: ‘/ems’ 就是在代理是时候使用/api 代理
http://172.0.0.228:3103/ems，使用的时候就可以直接这样使用

axios.get('/ems/v1').then((res)=>{
    console.log(res)
})

也可以不用pathRewrite 如同KTTiming 使用时就要写全地址后面的

axios.get('/ems/ems/v1').then((res)=>{
    console.log(res)
})