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 相关文章推荐
Extjs grid添加一个图片状态或者按钮的方法
Apr 03 Javascript
JS对img标签进行优化使用onerror显示默认图像
Apr 24 Javascript
javascript解三阶幻方(九宫格)
Apr 22 Javascript
微信小程序日历组件calendar详解及实例
Jun 08 Javascript
浅谈react.js中实现tab吸顶效果的问题
Sep 06 Javascript
浅谈Redux中间件的实践
Jul 27 Javascript
vue中Element-ui 输入银行账号每四位加一个空格的实现代码
Sep 14 Javascript
深入了解JavaScript代码覆盖
Jun 13 Javascript
layui table 表格上添加日期控件的两种方法
Sep 28 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
Oct 16 Javascript
vue中的v-model原理,与组件自定义v-model详解
Aug 04 Javascript
js删除指定位置超链接中含有百度与360的标题
Jan 06 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
JavaScript DOM学习第一章 W3C DOM简介
2010/02/19 Javascript
深入理解JavaScript系列(15) 函数(Functions)
2012/04/12 Javascript
uploadify 3.0 详细使用说明
2012/06/18 Javascript
jQuery中使用Ajax获取JSON格式数据示例代码
2013/11/26 Javascript
浅析JavaScript中两种类型的全局对象/函数
2013/12/05 Javascript
一些老手都不一定知道的JavaScript技巧
2014/05/06 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
2014/09/03 Javascript
js的toUpperCase方法用法实例
2015/01/27 Javascript
jQuery提示插件alertify使用指南
2015/04/21 Javascript
详细解读JavaScript的跨浏览器事件处理
2015/08/12 Javascript
easyui Draggable组件实现拖动效果
2015/08/19 Javascript
js enter键激发事件实例代码
2016/08/17 Javascript
JS克隆,属性,数组,对象,函数实例分析
2016/11/26 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
2017/01/19 Javascript
微信小程序 支付后台java实现实例
2017/05/09 Javascript
vue框架搭建之axios使用教程
2018/07/11 Javascript
ECharts地图绘制和钻取简易接口详解
2019/07/12 Javascript
微信小程序如何获取地址
2019/12/24 Javascript
打印出python 当前全局变量和入口参数的所有属性
2009/07/01 Python
推荐11个实用Python库
2015/01/23 Python
python使用fileinput模块实现逐行读取文件的方法
2015/04/29 Python
使用Python写一个量化股票提醒系统
2018/08/22 Python
详解Selenium+PhantomJS+python简单实现爬虫的功能
2019/07/14 Python
python Django中models进行模糊查询的示例
2019/07/18 Python
浅析python redis的连接及相关操作
2019/11/07 Python
美国宠物美容和宠物用品购物网站:Cherrybrook
2018/12/07 全球购物
伦敦鲜花递送:Flower Station
2021/02/03 全球购物
收银员的岗位职责范本
2014/02/04 职场文书
商场促销活动总结
2014/07/10 职场文书
生活部的活动方案
2014/08/19 职场文书
兵马俑导游词
2015/02/02 职场文书
劳资员岗位职责
2015/02/13 职场文书
简爱读书笔记
2015/06/26 职场文书
煤矿隐患排查制度
2015/08/05 职场文书
2016年校园重阳节广播稿
2015/12/18 职场文书
Python通过m3u8文件下载合并ts视频的操作
2021/04/16 Python