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

淩亂°似流年 2021-08-20 00:16 352阅读 0赞

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

**应用场景：**

vue项目中，如果采用了proxyTable反向代理，解决开发环境下的后台服务跨页问题的话，在生产环境下时候服务的URL地址就会报错。

**原因解析：**

1、配置了反向代理

![201911151620357.png][]

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][https_blog.csdn.net_gebitan505_article_details_58166055]

vue中使用axios给生产环境和开发环境配置不同的 baseUrl:process.env.BASE\_API：

[https://blog.csdn.net/qq\_41348029/article/details/84133983][https_blog.csdn.net_qq_41348029_article_details_84133983]

Vue自动判断开发环境与生产环境的接口地址

[https://blog.csdn.net/weixin\_43851769/article/details/89980088][https_blog.csdn.net_weixin_43851769_article_details_89980088]

[201911151620357.png]: /images/20210724/4d3801a0431a4cf58d0708de89798a52.png
[https_blog.csdn.net_gebitan505_article_details_58166055]: https://blog.csdn.net/gebitan505/article/details/58166055
[https_blog.csdn.net_qq_41348029_article_details_84133983]: https://blog.csdn.net/qq_41348029/article/details/84133983
[https_blog.csdn.net_weixin_43851769_article_details_89980088]: https://blog.csdn.net/weixin_43851769/article/details/89980088