vue 设置代理

原文： https://www.jianshu.com/p/5ef2b17f9b25

这里的vue代理是 vue静态服务器做代理。使用的是 http-proxy-middleware 这个模块（这个模块相当于是node.js的一个插件）。

注:

1、我的 api='/rng'

我的请求地址 ${api}/xxxx/xxx ，请求地址就为 '/rng/xxxx/xxx'

当node服务器 遇到 以 '/rng' 开头的请求 ，就会把 target 字段加上，那么我的请求地址就为 http://45.105.124.135:8081/rng/xxxx/xxx

2、 pathRewrite 意思是 把 /rng 替换为 空，那么我的请求地址就为 http://45.105.124.130:8081/xxxx/xxx （用在如果你的实际请求地址没有 rng 的情况）（对这一块的理解不太透彻，即使把'/rng' 的名重写成了'/' 但是在请求的接口里也会显示 '/rng'）

在项目开发的时候经常会遇到后端提供的多个服务请求地址域名或端口号不一致的情况这时候就需要前端设置多个proxy跨域代理，本文以vue-element-admin为例展示步骤如下：

1:配置环境变量 .env.development

2: 配置项目根目录下的vue.config.js 找到devServer

PS：注意VUE_APP_BASE_API 放在数组的最后一个，如果你VUE_APP_BASE_API跟我一样设置为'' 的话，这样才不会被代理的虚拟path覆盖！

3: 找到项目中管理请求地址的文件 src/api/proxy.js （proxy.js 是我随便起的名字