极快切换开发代理环境推荐程度 ☆☆☆

开发过程中，我们可能经常需要切换不同的测试环境，一般是使用 devServer.proxy 做的代理，但是它的 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 数据等等。

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

这篇好文章是转载于：学新通技术网