問題

參與過多人項目之後，總是會碰到下面的問題。

• 需要跟另一個人對接了，那麼就要把代理的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 切換代理

選擇代理

切換成功