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判断单选框或复选框是否选中方法集锦
Apr 04 Javascript
Jquery图形报表插件 jqplot简介及参数详解
Oct 10 Javascript
uploadify在Firefox下丢失session问题的解决方法
Aug 07 Javascript
jQuery过滤选择器用法分析
Feb 10 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
Oct 14 Javascript
解决URL地址中的中文乱码问题的办法
Feb 10 Javascript
详解Vue单元测试Karma+Mocha学习笔记
Jan 31 Javascript
微信小程序实现弹出菜单功能
Jun 12 Javascript
通过vue-cli3构建一个SSR应用程序的方法
Sep 13 Javascript
如何基于JavaScript判断图片是否加载完成
Dec 28 Javascript
解决vue项目axios每次请求session不一致的问题
Oct 24 Javascript
三种方式清除vue路由跳转router-link的历史记录
Apr 10 Vue.js
微信小程序实现卡片层叠滑动效果
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
深入array multisort排序原理的详解
2013/06/18 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题
2007/01/09 Javascript
将string解析为json的几种方式小结
2010/11/11 Javascript
jquery控制显示服务器生成的图片流
2015/08/04 Javascript
jQuery实现仿百度帖吧头部固定导航效果
2015/08/07 Javascript
JavaScript的Backbone.js框架入门学习指引
2016/05/07 Javascript
前端框架Vue.js中Directive知识详解
2016/09/12 Javascript
js处理层级数据结构的方法小结
2017/01/17 Javascript
浅谈js中同名函数和同名变量的执行问题
2017/02/12 Javascript
浅谈regExp的test方法取得的值变化的原因及处理方法
2017/03/01 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
2017/08/24 jQuery
Angular5给组件本身的标签添加样式class的方法
2018/04/07 Javascript
js实现ATM机存取款功能
2020/10/27 Javascript
nodejs微信开发之自动回复的实现
2019/03/17 NodeJs
详解原生JS回到顶部
2019/03/25 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
2019/05/23 Javascript
Python入门_浅谈字符串的分片与索引、字符串的方法
2017/05/16 Python
Python虚拟环境项目实例
2017/11/20 Python
Python搭建FTP服务器的方法示例
2018/01/19 Python
Python后台开发Django的教程详解(启动)
2019/04/08 Python
利用selenium爬虫抓取数据的基础教程
2019/06/10 Python
华为校园招聘上机笔试题 扑克牌大小(python)
2020/04/22 Python
详解用Python进行时间序列预测的7种方法
2020/03/13 Python
如何用 Python 处理不平衡数据集
2021/01/04 Python
HTML5标签与HTML4标签的区别示例介绍
2013/07/18 HTML / CSS
iHerb中文官网:维生素、保健品和健康产品
2018/11/01 全球购物
西班牙最好的在线购买葡萄酒的商店:Vinoseleccion
2019/10/30 全球购物
linux下进程间通信的方式
2013/01/23 面试题
介绍一下Java中的static关键字
2012/05/12 面试题
《天安门广场》教学反思
2014/04/23 职场文书
创先争优活动承诺书
2014/08/30 职场文书
公司合并协议书范本
2014/09/30 职场文书
80后婚前协议书范本
2014/10/24 职场文书
2015年医院科室工作总结范文
2015/05/26 职场文书
2015少先队大队辅导员工作总结
2015/07/24 职场文书
三严三实·严以律己心得体会
2016/01/13 职场文书