Vue2动态代理,换服务无须重启项目

1、痛点

当我们需要使用不同的服务器时，就需要手动修改vue.config.js中配置并重新启动项目。当项目越来越大时，会需要较长的时间来等待项目启动，如此反复，极大影响我们开发进度。

2、寻求解决方案

• vue-cli 的代理是使用的http-proxy-middleware包，所以proxy选项的配置也是基于这个包的配置。在proxy配置选项中有两个属性target以及router。其中target是默认的代理地址。而router可以return一个字符串服务地址，那么当两个选项都配置了时，http-proxy-middleware在解析配置时，会首先使用router函数的返回值，当router的返回值不可以用时，那么就会fallback至target。
• 项目在每次发起http请求时都会调用router中的函数，对我们的环境地址文件进行实时读取，从而指向我们最新修改的环境地址。
  3、解决方案（API为例）
• 在vue.config.js文件中添加如下代码

const hotServer = () =><