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 相关文章推荐
js实时获取系统当前时间实例代码
Jun 28 Javascript
利用JQuery和Servlet实现跨域提交请求示例分享
Feb 12 Javascript
jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)
Mar 30 Javascript
10个很棒的jQuery代码片段
Sep 24 Javascript
原生js实现数字字母混合验证码的简单实例
Dec 10 Javascript
jquery树形菜单效果的简单实例
Jun 06 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
Jun 20 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
Feb 27 Javascript
vue-router 前端路由之路由传值的方式详解
Apr 30 Javascript
JS将时间秒转换成天小时分钟秒的字符串
Jul 10 Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
Feb 09 Javascript
如何使用 JavaScript 操作浏览器历史记录 API
Nov 24 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
如何阻止网站被恶意反向代理访问(防网站镜像)
2014/03/18 PHP
PHP生成自定义长度随机字符串的函数分享
2014/05/04 PHP
CI框架安全类Security.php源码分析
2014/11/04 PHP
php+flash+jQuery多图片上传源码分享
2020/07/27 PHP
利用PHP获取网站访客的所在地位置
2017/01/18 PHP
php数组和链表的区别总结
2019/09/20 PHP
(JS实现)MapBar中坐标的加密和解密的脚本
2007/05/16 Javascript
ExtJS下 Ext.Direct加载和提交过程排错小结
2013/04/02 Javascript
ExtJS4给Combobox设置列表中的默认值示例
2014/05/02 Javascript
超棒的响应式布局jQuery插件Freetile.js
2014/11/17 Javascript
javascript解决IE6下hover问题的方法
2015/07/28 Javascript
原生js和jquery分别实现横向导航菜单效果
2016/05/13 Javascript
完美实现js选项卡切换效果(二)
2017/03/08 Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
2018/01/09 Javascript
解决vue项目打包后提示图片文件路径错误的问题
2018/07/04 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
2018/10/11 Javascript
微信小程序如何播放腾讯视频的实现
2019/09/20 Javascript
[01:55]2014DOTA2国际邀请赛快报:国土生病 紧急去医院治疗
2014/07/10 DOTA
[00:48]完美“圣”典2016风云人物:xiao8宣传片
2016/11/30 DOTA
[41:05]Serenity vs Pain 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Ubuntu 14.04+Django 1.7.1+Nginx+uwsgi部署教程
2014/11/18 Python
Python实现的求解最大公约数算法示例
2018/05/03 Python
python 动态调用函数实例解析
2019/10/21 Python
记一次django内存异常排查及解决方法
2020/08/07 Python
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
2014/05/07 HTML / CSS
Dr. Martens马汀博士官网:马丁靴始祖品牌
2016/10/15 全球购物
Ralph Lauren法国官网:美国高品味时装品牌
2017/12/08 全球购物
H&M旗下高端女装品牌:& Other Stories
2018/05/07 全球购物
美赞臣新加坡官方旗舰店:Enfagrow新加坡
2019/05/15 全球购物
10条PHP编程习惯
2014/05/26 面试题
毕业自荐书
2013/12/09 职场文书
优质服务演讲稿
2014/05/14 职场文书
民主评议政风行风整改方案
2014/09/17 职场文书
初婚初育证明范本
2014/11/24 职场文书
2015毕业生实习工作总结
2014/12/12 职场文书
农民工工资承诺书大全
2015/05/04 职场文书