问题

参加过多人我的项目之后，总是会碰到上面的问题。

• 须要跟另一个人对接了，那么就要把代理的target改成他的ip地址，改完还得重启我的项目。
• 他人把配置文件的代码提交了，笼罩了我的target配置。又得改回来，再次重启我的项目。

有可能配置文件的代码是这样的

module.exports = {
  devServer:{
    proxy:{
        '/api':{
            // 一大堆正文掉的target
            target:'<url>', // xx
            // target:'<url>', // 张三
            // target:'<url>', // 李四
        }
    }
  }
}

解决

前面花了点工夫，看了点文档，改了点代码，我的项目再也不必因为改代理而重启了。

因为http-proxy-middleware自身是反对的动静代理的，就是router参数。

看了一下changelog，从v0.16.0开始反对

那么就是看如何设计了呗。

产出

明天专门把这个写成了一个工具nice-proxy，不便在我的项目中去集成。
上面就简略介绍一下如何应用。

装置

yarn add nice-proxy -D

应用

第一步，初始化

npx nice-proxy init

该命令会在我的项目根目录生成一个nice-proxy文件夹，其中蕴含两个文件。

• proxy-list.json 这个文件用来寄存你所有的代理。
• proxy-config.json 这个文件用来寄存你以后应用的代理。

务必不要提交proxy-config.json文件到[git][svn]

第二步，批改配置文件代码

vue-cli

如果你应用的是vue-cli创立的我的项目，那么在你的vue.config.js文件里这么去写。

const { useNiceProxy } = require("nice-proxy");

module.exports = {
  devServer: {
    proxy: {
      "/api": {
        target: "<url>",
        ws: true,
        changeOrigin: true,
        // 参考vue-cli官网配置示例，只须要增加上面这行参数。
        router: useNiceProxy,
      },
    },
  },
};

webpack

同上

提供的命令

nice-proxy还提供了几个常用命令，不便你去保护代理列表。

所有的命令都是即时失效的。

list 列出所有代理

add 增加代理

change 切换代理

抉择代理

切换胜利