关闭

Vue多环境代理配置

时间: 2019-05-21阅读: 803标签: 代理

背景: 

多人协作模式下,修改代理比较麻烦,而且很容易某个开发人员会修改了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':'/'
              }
          }
        }
    }
}

这样就可以根据不同的环境配置不同的地址了。


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/3810

关闭

ES6中的代理(Proxy)和反射(Reflection)

调用 new Proxy() 可常见代替其它目标 (target) 对象的代理,它虚拟化了目标,所以二者看起来功能一致。代理可拦截JS引擎内部目标的底层对象操作,这些底层操作被拦截后会触发响应特定操作的陷阱函数。

Nginx 反向代理返回结果为空的问题

现在有一个 Web 项目,前端是使用 Vue.js 开发的,整个前端需要部署到 K8S 上,后端和前端分开,同样也需要部署到 K8S 上,因此二者需要打包为 Docker 镜像。对前端来说,打包 Docker 就遇到了一个问题:跨域访问问题。

如何使用Proxy 来代理Js中的类?

Proxy 对象(Proxy)是 ES6 的一个非常酷却鲜为人知的特性。虽然这个特性存在已久,但是我还是想在本文中对其稍作解释,并用一个例子说明一下它的用法。

node怎么做反向代理?

在实际工程开发中,会有前后端分离的需求。使用node.js反向代理的目的:实现前后端分离,前端减少路径请求的所需的路由文件。

Nginx反向代理之动静分离

我们已经知道了什么是正向代理与反向代理,这次我们就讲一下Nginx的动静分离的案例,其实质运用的就是反向代理,专门用一台服务器代理服务器上的图片资源。

JavaScript代理的惊人威力

今天我们要学习的是ECMAScript 6的代理。我们将在本文中涉及以下主题。什么是代理?代理人在行动,谁使用代理,使用案例和实例,资源

centos7下搭建高匿HTTP代理

一般适用情况:1、两台都有外网IP,一台服务器请求资源通过另外一个服务器,本文重点讲第一种。2、两台服务器,其中一台服务器只有内网IP,另外一台服务器有公网和内网IP。

反向代理和内网穿透

反向代理看上去看深奥,其实不然,只是因为汉语言文化的差异导致它看上去深奥。一般反派感觉都比较厉害和神秘。要理解反向代理,我们就不得不说一下正向代理。正向代理代理的对象是客户端;反向代理代理的对象是服务端

.Net Core/Framework之Nginx反向代理后获取客户端IP等数据探索

公司项目最近出现获取访问域名、端口、IP错误现象,通过排查发现, 之前项目一直通过Nginx自定义Headers信息来获取,但最近运维人员失误操作造成自定义Header信息丢失,造成项目拿不到对应的数据。

什么是在线代理ip网页代理

当我们需要大量IP进行快节奏完成业绩的时候,很多人都会想到去IP代理服务商那里购买IP代理,所以我相信很多人对于IP代理这个词已经有一定的认识了,那么还有一个词叫做:在线代理ip网页代理

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!