問題

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

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

選擇代理

切換成功