Vue多环境代理配置方法思路详解


Posted in Javascript onJune 21, 2019

背景:

多人协作模式下,修改代理比较麻烦,而且很容易某个开发人员会修改了vue.config.js文件后提交了。

第一,很容易引起冲突。

第二,很容易出现代理错误,需要排查。而且现在微服务盛行,在生产环境下有网关配置,不会出错,但是在本地调试会造成麻烦,如修改了代理地址需要同步修改代理中的地址,很麻烦也很容易出错。

解决思路:

1.开发中定义常量js文件,例如constants.js。用户存放各个服务需要代理的服务名。

let api = ""
  let loginServer = "/loginServer"
  let businessServer = "/businessServe"
  if(process.env.NODE_ENV == "development"){
    api = "/api"
    loginServer = api + LoginServer
    businessServer = api + businessServer
  }
  export {
    loginServer,
    businessServer
  }

其中api为代理规则中配置,loginServer为服务名,可根据业务需要替换在实际的业务中就可以这么用

import {loginServer} from 'constants'
 function login(params){
  return axios.post(loginServer+"/login",params)
 }

其中 loginServer为服务名,login为方法名,params为参数。

在vue.config.js中配置代理

modules.exports = {
  publicPath:"/" ,
  devServer: {
    port: 8080,
    proxy:{
     '/api/loginServer':{
       target:"http://localhost:8080",
       ws:true,
       changeOrigin:true,
       pathRewrite:{
         '^/api':'/'
       }
     },
      '/api/businessServer':{
       target:"http://localhost:8081",
       ws:true,
       changeOrigin:true,
       pathRewrite:{
         '^/api':'/'
       }
     }
    }
  }
}

这么配置可以满足需求,但是会有多人改动vue.config.js的情况,造成以上说的错误。

解决方案:

vue中提供了 --mode 模式,并提供了 .env.local 等文件,此文件被git忽略,且可根据当前 mode设置的值寻找环境变量配置,例如 --mode=dev ,则.env.dev.local 或.env.dev 等文件中的配置会生效,.local文件会被git忽略,因此咱们用这个,--mode设置在 package.json中,在npm run serve 中添加

script:{
"serve":"vue-cli-service serve --mode=dev"
}

在项目根目录下jianli .env.dev.local文件,文件中添加 以下键值对(此文件中只接受键值对

.env.dev.local

loginServerURL =http://localhost:8080
businessServerURL = http://localhost:8081

当然可根据不同的模式建立不同的local文件

.env.prod.local等

vue.config.js中改写

modules.exports = {
  publicPath:"/" ,
  devServer: {
    port: 8080,
    proxy:{
     '/api/loginServer':{
       target:process.env.loginServerURL?process.env.loginServerURL:"httpL//localhost:8080",
       ws:true,
       changeOrigin:true,
       pathRewrite:{
         '^/api':'/'
       }
     },
      '/api/businessServer':{
       target:process.env.loginServerURL?process.env.businessServerURL :"http://localhost:8081",
       ws:true,
       changeOrigin:true,
       pathRewrite:{
         '^/api':'/'
       }
     }
    }
  }
}

这样就可以根据不同的环境配置不同的地址了。

总结

以上所述是小编给大家介绍的Vue多环境代理配置方法思路详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JavaScript脚本语言在网页中的简单应用
May 13 Javascript
javascript css在IE和Firefox中区别分析
Feb 18 Javascript
Javascript匿名函数的一种应用 代码封装
Jun 27 Javascript
javascript实现tabs选项卡切换效果(自写原生js)
Mar 19 Javascript
javascript中Date对象的getDay方法使用指南
Dec 22 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
Jun 05 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
Oct 19 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
Feb 13 Javascript
bootstrap modal+gridview实现弹出框效果
Aug 15 Javascript
jsTree事件和交互以及插件plugins详解
Aug 29 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
Oct 11 Javascript
详解使用element-ui table组件的筛选功能的一个小坑
Nov 02 Javascript
微信小程序实现卡片层叠滑动效果
Jun 21 #Javascript
使用express来代理服务的方法
Jun 21 #Javascript
react+redux仿微信聊天界面
Jun 21 #Javascript
基于jQuery的时间戳与日期间的转化
Jun 21 #jQuery
jQuery事件委托代码实践详解
Jun 21 #jQuery
Vue.js中的extend绑定节点并显示的方法
Jun 20 #Javascript
微信小程序动态显示项目倒计时
Jun 20 #Javascript
You might like
php实现利用phpexcel导出数据
2013/08/24 PHP
PHP中数据类型转换的三种方式
2015/04/02 PHP
实例讲解如何在PHP的Yii框架中进行错误和异常处理
2016/03/17 PHP
判断文件是否正在被使用的JS代码
2013/12/21 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
2014/04/14 Javascript
Nodejs中读取中文文件编码问题、发送邮件和定时任务实例
2015/01/01 NodeJs
JavaScript将字符串转换成字符编码列表的方法
2015/03/19 Javascript
JavaScript DOM进阶方法
2015/04/13 Javascript
javascript 中的 delete及delete运算符
2015/11/15 Javascript
JS实现根据文件字节数返回文件大小的方法
2016/08/02 Javascript
jQuery Easyui快速入门教程
2016/08/21 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
2016/10/13 Javascript
nodejs开发——express路由与中间件
2017/03/24 NodeJs
微信小程序实现手势图案锁屏功能
2018/01/30 Javascript
Angular项目如何升级至Angular6步骤全纪录
2018/09/03 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
2018/09/13 Javascript
vue实现微信二次分享以及自定义分享的示例
2019/03/20 Javascript
javascript获取元素的计算样式
2019/05/24 Javascript
基于Vue中的父子传值问题解决
2020/07/27 Javascript
vue循环中点击选中再点击取消(单选)的实现
2020/09/10 Javascript
Python实现的彩票机选器实例
2015/06/17 Python
python中copy()与deepcopy()的区别小结
2018/08/03 Python
python使用MQTT给硬件传输图片的实现方法
2019/05/05 Python
python使用sessions模拟登录淘宝的方式
2019/08/16 Python
常用python爬虫库介绍与简要说明
2020/01/25 Python
python dir函数快速掌握用法技巧
2020/12/09 Python
Bloomingdale’s阿联酋:选购奢华时尚、美容及更多
2020/09/22 全球购物
Weblogic和WebSphere不同特点
2012/05/09 面试题
幼儿园庆六一活动方案
2014/03/06 职场文书
护理人员的自我评价分享
2014/03/15 职场文书
学校节能减排方案
2014/06/13 职场文书
禁止酒驾标语
2014/06/25 职场文书
个人先进事迹总结
2015/02/26 职场文书
爱心捐书倡议书
2015/04/27 职场文书
Pyqt5将多个类组合在一个界面显示的完整示例
2021/09/04 Python
SQL Server 忘记密码以及重新添加新账号
2022/04/26 SQL Server