Vue项目proxyTable反向代理，开发环境与生产环境下服务接口地址的自动匹配

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