乐趣区

关于前端:你的项目切换代理需要重启吗

jiezi

问题

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

  • 须要跟另一个人对接了，那么就要把代理的 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 切换代理

抉择代理

切换胜利

退出移动版