快速切换开发代理环境（推荐程度 ☆☆☆）

本文属于个人在项目中完成的小优化点记录，其它小优化导航连接：关于个人在 Vue 项目上的一些小优化记录

开发过程中，我们可能经常需要切换不同的测试环境，一般是使用 devServer.proxy 做的代理，但是它的 target 是一个字符串，并不支持函数的方式，因此导致我们每次修改了配置文件中的环境变量之后都需要重新启动项目，在一些大型项目中重启比较耗时。

因此我们可以考虑将这个过程交给程序去做。

通过查看 http-proxy-middleware 官方文档（其底层是使用 http-proxy，如果有感兴趣的同学可以参考我的这篇文章《http-proxy 模块原理解析 》），我们发现其支持的配置参数中有 router，它可以是一个对象也可以是一个函数，如果是函数，则它的返回值用于替代 target，因此我们可以手动监听对应的配置文件，当它发生变化的时候重新返回对应的代理：

// 在 vue.config.js 中

let proxyHost = process.env.DEV_SERVER_PROXY_HOST;

if (process.env.NODE_ENV === "development") {
  // 仅在开发环境开启！这一行非常重要，否则在生产环境打包的时候会由于 chokidar 一直在监听文件导致编译无法结束，从而卡在编译阶段无法继续后续的 ci/cd 流程
  // 可以直接使用 fs.watchFile，但我个人比较喜欢使用 chokidar
  require("chokidar")
    .watch("./.env.development.local")
    .on("change", (path) => {
      const config = require("dotenv").config({ path });
      proxyHost =
        config.parsed.DEV_SERVER_PROXY_HOST ||
        process.env.DEV_SERVER_PROXY_HOST;
    });
}

上面使用到了 chokidar 和 dotenv，chokidar 用于监听配置文件的变化，dotenv 用于重新加载环境变量配置文件。每次发生变化就赋值给 proxyHost

接下来在 vue.config.js 配置中的 devServer 下添加：

{
    // ...
    devServer: {
        target: proxyHost, // target 不能少，否则会报错
        router: () => proxyHost // 添加这一行
    }
    // ...
}

我们也可以在 devServer 中添加一些其他逻辑，比如自动登录，重定向到 mock 数据等等。

当然，社区也有一些其它模块可以自动实现这个功能。