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

 更新时间:2019-06-25 03:00:58   作者:佚名   我要评论(0)

背景:
多人协作模式下,修改代理比较麻烦,而且很容易某个开发人员会修改了vue.config.js文件后提交了。
第一,很容易引起冲突。
第二,很容易出现代理错误

背景:

多人协作模式下,修改代理比较麻烦,而且很容易某个开发人员会修改了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多环境代理配置方法思路详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

您可能感兴趣的文章:

  • vue-cli3添加模式配置多环境变量的方法
  • 详解vue-cli3多环境打包配置
  • vue-cli项目配置多环境的详细操作过程
  • 基于vue cli 通过命令行传参实现多环境配置
  • 通过vue-cli来学习修改Webpack多环境配置和发布问题
  • vue-cli 3.x 配置Axios(proxyTable)跨域代理方法
  • 详解vue-cli 接口代理配置
  • 详解vue-cli构建项目反向代理配置
  • Apache虚拟目录配置及vue-cli反向代理的设置方法

相关文章

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

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

    背景: 多人协作模式下,修改代理比较麻烦,而且很容易某个开发人员会修改了vue.config.js文件后提交了。 第一,很容易引起冲突。 第二,很容易出现代理错误
    2019-06-25
  • 如何测量vue应用运行时的性能

    如何测量vue应用运行时的性能

    在上一篇文章中,我们讨论了如何提高大型数据的性能。但是我们还没有测量它提高了多少。 我们可以使用Chrome DevTools 的性能选项来实现这一点。但是为了获
    2019-06-25
  • 详解Webpack如何引入CDN链接来优化编译后的体积

    详解Webpack如何引入CDN链接来优化编译后的体积

    背景 在 Vue 项目中,引入到工程中的所有 js 文件,编译时都会被打包进 vendor.js,也就导致了 vendor.js 文件体积变得相当臃肿,一定程度上影响着页面的渲
    2019-06-25
  • 在JSP页面中动态生成图片验证码的方法实例

    在JSP页面中动态生成图片验证码的方法实例

    在JSP页面中动态生成图片验证码 <%@ page language="java" pageEncoding="UTF-8"%> <%@ page import="java.awt.*,java.awt.image.*,com.sun.image.codec.j
    2019-06-25
  • 详解Java中的scala正则表达式

    详解Java中的scala正则表达式

    Scala 通过 scala.util.matching 包中的 Regex 类来支持正则表达式。 eg:使用正则表达式查找单词 Scala 实例中使用 String 类的 r() 方法构造了一个Regex对
    2019-06-25
  • 微信小程序自定义多列选择器使用详解

    微信小程序自定义多列选择器使用详解

    一、预览 微信小程序在自带的表单组件中加入了选择器picker,并给出了常用的时间和省市区三级联动选择器,但日常开发中不可能仅仅使用这些选择器,所以我们在
    2019-06-25
  • 微信小程序实现圆形进度条动画

    微信小程序实现圆形进度条动画

    本文实例为大家分享了微信小程序动画之圆形进度条,供大家参考,具体内容如下 上图: 代码: js: //获取应用实例 var app = getApp() var interval; var
    2019-06-25
  • JSP使用过滤器防止Xss漏洞

    JSP使用过滤器防止Xss漏洞

    在用java进行web业务开发的时候,对于页面上接收到的参数,除了极少数是步可预知的内容外,大量的参数名和参数值都是不会出现触发Xss漏洞的字符。而通常为了避
    2019-06-25
  • JS中超越现实的匿名函数用法实例分析

    JS中超越现实的匿名函数用法实例分析

    本文实例讲述了JS中超越现实的匿名函数用法。分享给大家供大家参考,具体如下: 一般函数: function show1(name){ alert(name); //打印:zhangsan }
    2019-06-25
  • 使用Vue开发自己的Chrome扩展程序过程详解

    使用Vue开发自己的Chrome扩展程序过程详解

    前言 浏览器扩展程序是可以修改和增强 Web 浏览器功能的小程序。它们可用于各种任务,例如阻止广告,管理密码,组织标签,改变网页的外观和行为等等。 好消
    2019-06-25

最新评论