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+Element实现增删改查的示例源码
Nov 23 Vue.js
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 Vue.js
vue实现图片裁剪后上传
Dec 16 Vue.js
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
vue实现一个获取按键展示快捷键效果的Input组件
Jan 13 Vue.js
vue 中this.$set 动态绑定数据的案例讲解
Jan 29 Vue.js
聊聊vue 中的v-on参数问题
Jan 29 Vue.js
开发一个封装iframe的vue组件
Mar 29 Vue.js
vue首次渲染全过程
Apr 21 Vue.js
关于vue中如何监听数组变化
Apr 28 Vue.js
Vue中使用import进行路由懒加载的原理分析
Apr 01 Vue.js
vue数据字典取键值项目的字典问题
Apr 12 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 解决utf-8和gb2312编码转换问题
2010/03/18 PHP
PHP编码规范之注释和文件结构说明
2010/07/09 PHP
php编写批量生成不重复的卡号密码代码
2015/05/14 PHP
PHP中危险的file_put_contents函数详解
2017/11/04 PHP
JS预览图像将本地图片显示到浏览器上
2013/08/25 Javascript
Node.js实现Excel转JSON
2015/04/24 Javascript
理解JavaScript事件对象
2016/01/25 Javascript
基于socket.io+express实现多房间聊天
2016/03/17 Javascript
js 声明数组和向数组中添加对象变量的简单实例
2016/07/28 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
2016/10/11 Javascript
全面解析node 表单的图片上传
2016/11/21 Javascript
layui导航栏实现代码
2017/05/19 Javascript
微信小程序 密码输入(源码下载)
2017/06/27 Javascript
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
2017/07/12 jQuery
AngularJs 终极购物车(实例讲解)
2017/11/08 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
2018/06/14 Javascript
从零开始学习搭建React脚手架项目
2018/08/23 Javascript
vue表单自定义校验规则介绍
2018/08/28 Javascript
JQuery插件tablesorter表格排序实现过程解析
2020/05/28 jQuery
[06:30]DOTA2英雄梦之声_第15期_死亡先知
2014/06/21 DOTA
Python正则表达式匹配HTML页面编码
2015/04/08 Python
Python实现快速排序算法及去重的快速排序的简单示例
2016/06/26 Python
实例讲解Python中浮点型的基本内容
2019/02/11 Python
Numpy(Pandas)删除全为零的列的方法
2020/09/11 Python
Python爬虫入门教程02之笔趣阁小说爬取
2021/01/24 Python
CSS3 制作旋转的大风车(充满童年回忆)
2013/01/30 HTML / CSS
意大利辅助药品、药物和补品在线销售:FarmaEurope
2020/04/29 全球购物
办公室文秘自我评价
2013/09/21 职场文书
同学聚会策划方案
2014/06/06 职场文书
护士求职信
2014/07/05 职场文书
2015年试用期自我评价范文
2015/03/10 职场文书
推销搭讪开场白
2015/05/28 职场文书
第一书记观后感
2015/06/08 职场文书
2015年酒店销售部工作总结
2015/07/24 职场文书
机关单位2016年创先争优活动总结
2016/04/05 职场文书
简单了解 MySQL 中相关的锁
2021/05/25 MySQL