vue3不同环境下实现配置代理


Posted in Vue.js onMay 25, 2022

不同环境下如何配置代理

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

第一种情况

前端也不申请多套环境。

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

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

第二种情况

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

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

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

vue3不同环境下实现配置代理

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

vue3不同环境下实现配置代理

package.jason里面这么写

vue3不同环境下实现配置代理

Vue设置本地代理

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

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

本地安装Whistle

w2 start

启动后,添加rules:

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

vue3不同环境下实现配置代理

vue3不同环境下实现配置代理

谷歌浏览器安装Proxy SwitchyOmega扩展

搜索 proxy switchyomega 添加

配置:

vue3不同环境下实现配置代理

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

浏览器操作

vue3不同环境下实现配置代理

关键信息

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

vue3不同环境下实现配置代理


Tags in this post...

Vue.js 相关文章推荐
vue+iview实现分页及查询功能
Nov 17 Vue.js
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 Vue.js
Vue 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 Vue.js
Vue+penlayers实现多边形绘制及展示
Dec 24 Vue.js
vue 实现基础组件的自动化全局注册
Dec 25 Vue.js
Vue实现图书管理案例
Jan 20 Vue.js
vue3.0 自适应不同分辨率电脑的操作
Feb 06 Vue.js
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 Vue.js
详解Vue的列表渲染
Nov 20 Vue.js
vue中使用mockjs配置和使用方式
Apr 06 Vue.js
ant design vue的form表单取值方法
Jun 01 Vue.js
Vue Element plus使用方法梳理
Dec 24 Vue.js
vue使用element-ui按需引入
May 20 #Vue.js
vue/cli 配置动态代理无需重启服务的方法
May 20 #Vue.js
Vue ECharts实现机舱座位选择展示功能
May 15 #Vue.js
Vue组件化(ref,props, mixin,.插件)详解
vue postcss-px2rem 自适应布局
May 15 #Vue.js
VUE解决跨域问题Access to XMLHttpRequest at
vue使用watch监听属性变化
Apr 30 #Vue.js
You might like
关于shopex同步ucenter的redirect问题,导致script不运行
2013/04/10 PHP
DOM基础及php读取xml内容操作的方法
2015/01/23 PHP
PHP之预定义接口详解
2015/07/29 PHP
iOS自定义提示弹出框实现类似UIAlertView的效果
2016/11/16 PHP
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
2009/10/24 Javascript
jquer之ajaxQueue简单实现代码
2011/09/15 Javascript
js动态添加onload、onresize、onscroll事件(另类方法)
2012/12/26 Javascript
JSF中confirm弹出框的用法示例介绍
2014/01/07 Javascript
jquery实现的V字形显示效果代码
2015/10/27 Javascript
基于node实现websocket协议
2016/04/25 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
2016/06/06 Javascript
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
2016/10/10 Javascript
vue2.0构建单页应用最佳实战
2017/04/01 Javascript
基于Vue.js 2.0实现百度搜索框效果
2020/12/28 Javascript
JavaScript代码执行的先后顺序问题
2017/10/29 Javascript
JS基于贪心算法解决背包问题示例
2017/11/27 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
2018/05/09 Javascript
Vue中div contenteditable 的光标定位方法
2018/08/25 Javascript
微信小程序云开发修改云数据库中的数据方法
2019/05/18 Javascript
element-ui和vue表单(对话框)验证提示语(残留)清除操作
2020/09/11 Javascript
[03:46]显微镜下的DOTA2第七期——满血与残血
2014/06/20 DOTA
[01:16:12]完美世界DOTA2联赛PWL S2 FTD vs Inki 第一场 11.21
2020/11/23 DOTA
python错误:AttributeError: 'module' object has no attribute 'setdefaultencoding'问题的解决方法
2014/08/22 Python
Python使用PIL库实现验证码图片的方法
2016/03/11 Python
Pytorch 神经网络—自定义数据集上实现教程
2020/01/07 Python
Python中实现输入超时及如何通过变量获取变量名
2020/01/18 Python
python定义类的简单用法
2020/07/24 Python
Python基于opencv的简单图像轮廓形状识别(全网最简单最少代码)
2021/01/28 Python
幼师自荐信范文
2013/10/06 职场文书
美术师范毕业生自荐信
2013/11/16 职场文书
酒店员工检讨书
2014/02/18 职场文书
班级学雷锋活动总结
2014/06/26 职场文书
中英文求职信范文
2015/03/19 职场文书
网络妈妈观后感
2015/06/08 职场文书
Python列表删除重复元素与图像相似度判断及删除实例代码
2021/05/07 Python
Python 中random 库的详细使用
2021/06/03 Python