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

背景：

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

赞 (0)

相关推荐

  • vue-cli 3.x 配置Axios(proxyTable)跨域代理方法

    vue-cli 3.x 的beta版本,基于iview做的公司的角色权限管理平台. 3.x 版本对整个项目的构建都有很大的改动,没有原先的config文件夹,没有dev.env.js和prod.dev.js,看了教程,要自己在根目录建vue.config去配置,如果你用axios,关于代理的配置,如下: 在vue.config.js中配置: 以上这篇vue-cli 3.x 配置Axios(proxyTable)跨域代理方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我

  • vue-cli项目配置多环境的详细操作过程

    vue-cli 默认只提供了 dev 和 prod 两种环境.但其实正真的开发流程可能还会多一个 sit 或者 stage 环境, 就是所谓的测试环境和预发布环境.所以我们就要简单的修改一下代码.其实很简单就是设置不同的环境变量 详细操作过程 1.在 package.json 中添加 test 命令 "scripts": { "dev": "cross-env NODE_ENV=online node build/dev-server.js --host

  • 基于vue cli 通过命令行传参实现多环境配置

    大多数项目都有生产环境和开发环境,一般情况下应该够了,但是有时候还需要sit,uat,本地等环境,这时候假如要通过注释的方式切换环境就相当麻烦了. 如果可以像下面这样切换环境就方便了 npm run serve //默认本地开发环境 npm run serve -sit //本地开发中使用sit环境 npm run serve -uat //本地开发中使用uat环境 npm run build //默认打包后使用生产环境 npm run build -local //打包后使用本地环境 npm

  • Apache虚拟目录配置及vue-cli反向代理的设置方法

    配置需求来自于前后端分离.后台由于使用PHP或者Java,但是前端使用vue,React这些框架时怎么和后端有效的数据通信.反向代理是个很好的选择,虽然jsonp也可以,单并不好玩. Apache配置虚拟目录 -实际上线项目需要通过域名来访问,比如http://www.xxx.com,但在本机上如何配置虚拟域名来访问本机的项目呢? 1.找到C:\Windows\System32\drivers\etc\hosts这个文件添加以下格式内容 127.0.0.1 www.mytest.com //你的

  • 通过vue-cli来学习修改Webpack多环境配置和发布问题

    通过vue-cli来学习修改Webpack多环境配置和发布问题

    Vue之所以现在如此之火热,一部分也得益于有官方的脚手架生成工具Vue-cli,大大简化了初学者环境搭建的成本,但是实际业务中我们往往需要实现其他的功能来对webpack进行改造,本文将会根据一些实际的业务需求,先学习vue-cli生成的模版,然后在进行相关修改. Vue-cli生成模版文件目录 ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-server.j

  • 详解vue-cli 接口代理配置

    本文介绍了vue-cli 接口代理配置,分享给大家,具体如下: 一些同学在配置接口代理时,会有疑问 我配置成功了为什么接口还是不通 ,其实代理已经成功 只是 接口访问地址规则没搞清楚 下面以本地测试为栗子 向大家介绍 一些基本操作这里就不介绍了 找到vue-cli config 文件夹下的 index.js  这是是配置接口规则的文件 同目录下建立 proxyConfig.js  一些同学习惯直接在原文件修改 ,也是可以但推荐使用新建文件的方式: module.exports = { proxy

  • 详解vue-cli3多环境打包配置

    最近下载了vue-cli3,研究了下vue-cli3下多环境的配置. 首先,安装vue-cli3. npm install -g @vue/cli 安装好之后的项目是这样的,见下图: 相比较vue-cli2的项目,缺少了build和config目录,另外static目录也没了,多了个public目录. 配置文件需要自己写一个vue.config.js,可以参考官方文档文档写,网址 https://cli.vuejs.org/zh/config/ 现在说重点,怎么配置多环境.打开package.j

  • vue-cli3添加模式配置多环境变量的方法

    vue-cli3配置多环境变量 先挂官网描述:环境变量和模式 需求 根据运行环境判断执行代码: 预发环境操作完成跳转地址与线上环境跳转地址不同 线上环境添加埋点脚本 实现 Step1:在项目根目录中新建.env.uat .env.uat配置如下: VUE_APP_BUILD_TYPE=uat vue-cli中规定,只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中. 代码中可以通过 process.env.VUE_APP_SECRET 这

  • 详解vue-cli构建项目反向代理配置

    详解vue-cli构建项目反向代理配置

    本文介绍了vue-cli构建项目反向代理配置,分享给大家,具体如下: proxyTable: {//配置请求代理 '/dlsys':{ target:'http://192.168.16.209:81', changeOrigin:true, pathRewrith:{ '^/dlsys': '/dlsys' } }, '/dlapi':{ target:'http://192.168.16.209:81', changeOrigin:true, pathRewrith:{ '^/dlapi':

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

    背景: 多人协作模式下,修改代理比较麻烦,而且很容易某个开发人员会修改了vue.config.js文件后提交了. 第一,很容易引起冲突. 第二,很容易出现代理错误,需要排查.而且现在微服务盛行,在生产环境下有网关配置,不会出错,但是在本地调试会造成麻烦,如修改了代理地址需要同步修改代理中的地址,很麻烦也很容易出错. 解决思路: 1.开发中定义常量js文件,例如constants.js.用户存放各个服务需要代理的服务名. let api = "" let loginServer = &q

  • VSCode各语言运行环境配置方法示例详解

    系统环境变量的配置 如:将F:\mingw64\bin添加到系统环境变量Path中 VSCode软件语言json配置C语言 创建个.vscode文件夹,文件夹内创建以下两个文件 launch.json 文件配置 { "version": "0.2.0", "configurations": [ { "name": "(gdb) Launch", "type": "cppdbg&

  • Vue.js框架路由使用方法实例详解

    Vue.js框架路由使用方法实例详解

    Vue.js框架路由使用方法实例详解 html代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name='viewport' content='width=device-width,initial-

  • Mysql 5.7.19 免安装版配置方法教程详解(64位)

    Mysql 5.7.19 免安装版配置方法教程详解(64位)

    官方网站下载mysql-5.7.19-winx64,注意对应系统64位或者32位,这里使用的是64位. 解压放置到本地磁盘.发现文件很大,大概是1.6G左右.删除lib文件夹下的.lib文件和debug文件夹下所有文件. 在主目录下创建my.ini文件,文件内容如下:(这里是简洁版,对应本机修改basedir和datadir的目录,根据需要可以自己扩充配置) [client] port=3306 default-character-set=utf8 [mysqld] basedir=D:\Jav

  • nginx rewrite重写规则与防盗链配置方法教程详解

    导读:nginx rewrite重写规则与防盗链配置方法,rewrite规则格式中flag标记的几种形式,盗链时返回403错误,允许的域名直接跟在第二行的域名后面. nginx rewrite重写规则与防盗链配置方法如下所示: nginx rewite 规则,官方文档:http://wiki.nginx.org/NginxHttpRewriteModule nginx rewrite规则格式:rewrite regex replacement flag flag标记有四种格式: last – 相

  • SpringBoot实现短信验证码校验方法思路详解

    SpringBoot实现短信验证码校验方法思路详解

    有关阿里云通信短信服务验证码的发送,请参考我的另一篇文章   Springboot实现阿里云通信短信服务有关短信验证码的发送功能 思路 用户输入手机号后,点击按钮获取验证码.并设置冷却时间,防止用户频繁点击. 后台生成验证码并发送到用户手机上,根据验证码.时间及一串自定义秘钥生成MD5值,并将时间也传回到前端. 用户输入验证码后,将验证码和时间传到后台.后台先用当前时间减去前台传过来的时间验证是否超时.如果没有超时,就用用户输入的验证码 + 时间 + 自定义秘钥生成MD5值与之前的MD5值比较,

  • vue全局使用axios的方法实例详解

    在vue项目开发中,我们使用axios进行ajax请求,很多人一开始使用axios的方式,会当成vue-resoure的使用方式来用,即在主入口文件引入import VueResource from 'vue-resource'之后,直接使用Vue.use(VueResource)之后即可将该插件全局引用了,所以axios这样使用的时候就报错了,很懵逼. 仔细看看文档,就知道axios 是一个基于 promise 的 HTTP 库,axios并没有install 方法,所以是不能使用vue.us

  • Spring Boot 2.0多数据源配置方法实例详解

    两个数据库实例,一个负责读,一个负责写. datasource-reader: type: com.alibaba.druid.pool.DruidDataSource url: jdbc:mysql://192.168.43.61:3306/test?useUnicode=true&characterEncoding=utf8&autoReconnect=true&useSSL=false username: icbc password: icbc driver-class-na

  • spring security在分布式项目下的配置方法(案例详解)

    分布式项目和传统项目的区别就是,分布式项目有多个服务,每一个服务仅仅只实现一套系统中一个或几个功能,所有的服务组合在一起才能实现系统的完整功能.这会产生一个问题,多个服务之间session不能共享,你在其中一个服务中登录了,登录信息保存在这个服务的session中,别的服务不知道啊,所以你访问别的服务还得在重新登录一次,对用户十分不友好.为了解决这个问题,于是就产生了单点登录: **jwt单点登录:**就是用户在登录服务登录成功后,登录服务会产生向前端响应一个token(令牌),以后用户再访问系

  • Vue实现网页转PDF方法流程详解

    Vue实现网页转PDF方法流程详解

    目录 需求背景 功能要求 功能实现过程 window.print()方法 使用html2canvas+jspdf实现 需求背景 我们平台在发货的时候需要打一张发货单,这张发货单上面需要显示客户的收货地址.发货地址.商品的特征信息和库存,以及订单金额等等内容. 功能要求 要求在页面中的订单详情页面点击某一个按钮,然后下载一个写好样式的PDF. 功能实现过程 window.print()方法 使用这个方法可以调起浏览器自带的打印方法,这个方法比较省事,直接写一个方法,然后绑定给按钮就完事.还能预览和

随机推荐