Vue项目proxyTable反向代理,开发环境与生产环境下服务接口地址的自动匹配
应用场景:
vue项目中,如果采用了proxyTable反向代理,解决开发环境下的后台服务跨页问题的话,在生产环境下时候服务的URL地址就会报错。
原因解析:
1、配置了反向代理
2、使用时候路径自带了apis,但是这只看开发环境下的,生产环境下识别不了这个apis
解决办法
(一)简单但每个使用到URL服务的地方都要设置
思路:代码判定是生产环境还是开发环境,然后拼接URL即可
实现:
var prodUrl="http://121.115.42.106:8079";
var devUrl="/apis";
var curUrl="";
process.env.NODE_ENV==='development' ? curUrl=devUrl: curUrl=prodUrl; //这句最重要
this.$axios.get(curUrl+'/handlerPage/GetFTPFilesHandler.ashx', {
params: {
XMBH: xmbh
}
})
(二)修改配置文件
参考文档:
VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址
https://blog.csdn.net/gebitan505/article/details/58166055
vue中使用axios给生产环境和开发环境配置不同的 baseUrl:process.env.BASE_API:
https://blog.csdn.net/qq_41348029/article/details/84133983
Vue自动判断开发环境与生产环境的接口地址
https://blog.csdn.net/weixin_43851769/article/details/89980088