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项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
vue组件中节流函数的失效的原因和解决方法
Dec 02 Vue.js
vue+element实现动态加载表单
Dec 13 Vue.js
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
Dec 15 Vue.js
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 Vue.js
聊聊vue 中的v-on参数问题
Jan 29 Vue.js
VUE实现吸底按钮
Mar 04 Vue.js
vue完美实现el-table列宽自适应
May 08 Vue.js
vue实现可拖拽的dialog弹框
May 13 Vue.js
vue3使用vue-router的完整步骤记录
Jun 20 Vue.js
Vue3中toRef与toRefs的区别
Mar 24 Vue.js
vue el-table实现递归嵌套的示例代码
Aug 14 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
用PHP程序实现支持页面后退的两种方法
2008/06/30 PHP
PHP图片处理之图片旋转和图片翻转实例
2014/11/19 PHP
php判断并删除空目录及空子目录的方法
2015/02/11 PHP
Laravel 5框架学习之模型、控制器、视图基础流程
2015/04/08 PHP
PHP/ThinkPHP实现批量打包下载文件的方法示例
2017/07/31 PHP
通过JAVAScript实现页面自适应
2007/01/19 Javascript
11款基于Javascript的文件管理器
2009/10/25 Javascript
Express.JS使用详解
2014/07/17 Javascript
node.js解决获取图片真实文件类型的问题
2014/12/20 Javascript
javascript实现点击提交按钮后显示loading的方法
2015/07/03 Javascript
JS实现为排序好的字符串找出重复行的方法
2016/03/02 Javascript
JavaScript操作 url 中 search 部分方法函数
2016/06/15 Javascript
基于angularJS的表单验证指令介绍
2016/10/21 Javascript
jquery精度计算代码 jquery指定精确小数位
2017/02/06 Javascript
关于不同页面之间实现参数传递的几种方式讨论
2017/02/13 Javascript
不得不看之JavaScript构造函数及new运算符
2017/08/21 Javascript
浅谈react 同构之样式直出
2017/11/07 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
2017/11/17 Javascript
Bootstrap实现的表格合并单元格示例
2018/02/06 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
2020/01/22 Javascript
解决vue无法侦听数组及对象属性的变化问题
2020/07/17 Javascript
js实现弹幕墙效果
2020/12/10 Javascript
基于pycharm导入模块显示不存在的解决方法
2018/10/13 Python
Keras中的多分类损失函数用法categorical_crossentropy
2020/06/11 Python
HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)
2017/01/05 HTML / CSS
解决H5的a标签的download属性下载service上的文件出现跨域问题
2019/07/16 HTML / CSS
HTML5实现自带进度条和滑块滑杆效果
2018/04/17 HTML / CSS
SKECHERS斯凯奇中国官网:来自美国的运动休闲品牌
2018/11/14 全球购物
英国顶级水晶珠宝零售商之一:Tresor Paris
2019/04/27 全球购物
农药学硕士毕业生自荐信
2013/09/25 职场文书
航空学院求职信
2014/06/11 职场文书
2014年宣传工作总结
2014/11/18 职场文书
教师廉政准则心得体会
2016/01/20 职场文书
python b站视频下载的五种版本
2021/05/27 Python
Redis入门教程详解
2021/08/30 Redis
SSM项目使用拦截器实现登录验证功能
2022/01/22 Java/Android