Vue在不同环境配置代理怎样做，如何设置本地代理-群英

上一篇：router动态路由清除怎样做，要点和代码是什么下一篇：TypeScript怎样使用，能实现哪些功能

今天这篇给大家分享的知识是“Vue在不同环境配置代理怎样做，如何设置本地代理”,小编觉得挺不错的，对大家学习或是工作可能会有所帮助，对此分享发大家做个参考，希望这篇“Vue在不同环境配置代理怎样做，如何设置本地代理”文章能帮助大家解决问题。

实际开发的时候，经常会遇到并行开发的需求，会出现第一个需求接口转发是一个地址，下一个需求接口转发是一个地址，这时候如何解决呢？

前端也不申请多套环境。

本地开发时，多加个代理，比如叫api2，然后在当前需求的接口前面使用这个。

但是会出现个问题，前端页面加载后，只有涉及当前需求的模块接口是通的，其他模块的接口报错（并不是说其他模块有问题，其他模块已提测），因为你本地启动后，前端只有一套环境，但是后端有俩套环境，二者不一致。如果当前需求的模块数据依赖于之前模块，那测试流程将无法走下去。

前端也申请俩套环境，配置相应的nginx。一般都是由运维配置，这样前端按照之前开发模式来就可以了，无需多加代理，nginx会把当前需求转发到后端对应的当前接口环境上，其他模块也不影响。

其实就是打包的时候后端讲代码合并到之前需求代码上了这样一致就不用影响了

还有个问题，这种情况下，前端的启动命令都是一样如果想区分不同环境下执行不同命令来区分环境的话，如何实现？

vue.config里面添加读取的代码

package.jason里面这么写

Vue设置本地代理

本地开发的时，在浏览器访问项目的地址为 localhost，但是当我们需要对接第三方验证后又回到本地项目时，由于第三方的回跳地址为正式服的域名就会不成功。

这个时候就需要把域名映射到本地项目的地址，可以通过修改host文件实现。

w2 start

启动后，添加rules：

/(?:https|http):\/\/griddev.jiuqi.com.cn/(.*)/ http://127.0.0.1:9898/$1

搜索 proxy switchyomega 添加

配置：

代理端口记得为： 8899，第一步中 Whistle 的默认端口号，如果修改了 Whistle 默认端口号，填修改后的。

关键信息

选择proxy，但是选择后只有你第一步 rules 里面匹配到的域名能访问了，并且是转到你配置的本地地址的。所以往第三方网站跳转会不成功，像这样：

上述内容具有一定的借鉴价值，感兴趣的朋友可以参考，希望能对大家有帮助，想要了解更多"Vue在不同环境配置代理怎样做，如何设置本地代理"的内容，大家可以关注群英网络的其它相关文章。

标签： Vue配置代理

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

上一篇：router动态路由清除怎样做，要点和代码是什么下一篇：TypeScript怎样使用，能实现哪些功能