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-drawer-layout实现手势滑出菜单栏
Nov 19 Vue.js
vue element实现表格合并行数据
Nov 30 Vue.js
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
Dec 15 Vue.js
Vue+penlayers实现多边形绘制及展示
Dec 24 Vue.js
vue浏览器返回监听的具体步骤
Feb 03 Vue.js
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
Apr 17 Vue.js
Vue详细的入门笔记
May 10 Vue.js
vue-cropper组件实现图片切割上传
May 27 Vue.js
vue中div禁止点击事件的实现
Apr 02 Vue.js
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
Apr 30 Vue.js
Vue2项目中对百度地图的封装使用详解
Jun 16 Vue.js
vue实现简易音乐播放器
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
PHP4引用文件语句的对比
2006/10/09 PHP
php split汉字
2009/06/05 PHP
php程序之die调试法 快速解决错误
2009/09/17 PHP
php Smarty 字符比较代码
2011/02/27 PHP
关于PHP的curl开启问题探讨
2014/04/08 PHP
PHP实现文件下载详解
2014/11/27 PHP
PHP解密Unicode及Escape加密字符串
2015/05/17 PHP
mac系统下安装多个php并自由切换的方法详解
2017/04/21 PHP
Yii2.0框架模型多表关联查询示例
2019/07/18 PHP
js实现刷新iframe的方法汇总
2015/04/27 Javascript
详解JavaScript正则表达式之分组匹配及反向引用
2016/03/09 Javascript
ES6新特性七:数组的扩充详解
2017/04/21 Javascript
Ionic项目中Native Camera的使用方法
2017/06/07 Javascript
AngularJS实用基础知识_入门必备篇(推荐)
2017/07/10 Javascript
使用vue构建移动应用实战代码
2017/08/02 Javascript
webpack使用 babel-loader 转换 ES6代码示例
2017/08/21 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
2018/04/27 jQuery
JS实现动态生成html table表格的方法分析
2018/07/11 Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
2019/05/05 Javascript
基于vue实现一个神奇的动态按钮效果
2019/05/15 Javascript
vue.js实现三级菜单效果
2019/10/19 Javascript
Javascript实现鼠标移入方向感知
2020/06/24 Javascript
[52:20]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
python抓取网页内容示例分享
2014/02/24 Python
Python 专题四 文件基础知识
2017/03/20 Python
Python3.6简单反射操作示例
2018/06/14 Python
Python反爬虫技术之防止IP地址被封杀的讲解
2019/01/09 Python
利用Python校准本地时间的方法教程
2019/10/31 Python
Python3如何使用多线程升程序运行速度
2020/08/11 Python
Python 必须了解的5种高级特征
2020/09/10 Python
PyTorch中的拷贝与就地操作详解
2020/12/09 Python
英国厨房与餐具用品为主的设计品牌:Joseph Joseph
2018/04/26 全球购物
香蕉共和国加拿大官网:Banana Republic加拿大
2018/08/06 全球购物
优秀大学生自荐信
2014/06/09 职场文书
MySQL连接查询你真的学会了吗?
2021/06/02 MySQL
如何解决goland,idea全局搜索快捷键失效问题
2022/04/03 Golang