让 Vue 使用指定配置文件进行构建

VUE_CLI_SERVICE_CONFIG_PATH环境变量#

还好，经过搜索，我发现vue-cli-service是支持使用VUE_CLI_SERVICE_CONFIG_PATH环境变量来自定义配置文件的，我们可以添加一个 npm script 像下面这样（Unix 下）

1
VUE_CLI_SERVICE_CONFIG_PATH=my.vue.config.js vue-cli-service build

然而我实际执行确报错“找不到模块my.vue.config.js”

看了下vue-cli-service的源码，获取配置文件的部分是这样的

1
// In loadUserOptions()
2
const configPath =
3
  process.env.VUE_CLI_SERVICE_CONFIG_PATH ||
4
  path.resolve(this.context, "vue.config.js");
5
if (fs.existsSync(configPath)) {
6
  try {
7
    fileConfig = require(configPath);
8

9
    if (typeof fileConfig === "function") {
10
      fileConfig = fileConfig();
11
    }
12

13
    if (!fileConfig || typeof fileConfig !== "object") {
14
      error(
15
        `Error loading ${chalk.bold(
16
          "vue.config.js",
17
        )}: should export an object or a function that returns object.`,
18
      );
19
      fileConfig = null;
20
    }
21
  } catch (e) {
22
    error(`Error loading ${chalk.bold("vue.config.js")}:`);
23
    throw e;
24
  }
25
}

可以看到，configPath会直接取环境变量作为 id 来require，而不会像默认的vue.config.js一样根据上下文来计算绝对路径

虽然看似非常反人类，但仔细想想也能理解这是出于安全考虑

那么解决方法就显而易见了，传个绝对路径进去，例如在 Unix 下可以利用$PWD环境变量

1
VUE_CLI_SERVICE_CONFIG_PATH=$PWD/my.vue.config.js vue-cli-service build

但这衍生出另一个问题，最直接的说，Windows 下没有$PWD，而是%cd%，虽然我们能利用cross-env解决不同操作系统下环境变量设置方式不同的问题，却无法解决 Windows 与 Unix 系统环境变量获取方式不同的问题

既然是 node，就用 node 解决#

一拍大腿之后，曲线救国的方案就出来了，我们可以直接用 node 获取配置的绝对路径，然后作为环境变量来执行npm run build

在 node 中执行命令就要请child_process出场了，梳理一下我们的需求：

1. 执行npm run build
2. 传入VUE_CLI_SERVICE_CONFIG_PATH环境变量
3. 维持原本的输出形式

阅读其文档，最终我选用 spawnSync 方法，相关参数如下

child_process.spawnSync(command[, args][, options])

• command <string> The command to run.
• args <string[]> List of string arguments.
• options <Object>
  • shell <boolean> | <string> If true, runs command inside of a shell. Uses '/bin/sh' on Unix, and process.env.ComSpec on Windows. A different shell can be specified as a string. See Shell Requirements and Default Windows Shell. Default: false (no shell).
  • stdio <string> | <Array> Child’s stdio configuration.
  • env <Object> Environment key-value pairs. Default: process.env.

值得说明的是 options.stdio 这一参数，其中有一条说明

'inherit': Pass through the corresponding stdio stream to/from the parent process. In the first three positions, this is equivalent to process.stdin, process.stdout, and process.stderr, respectively. In any other position, equivalent to 'ignore'.

这正是我们想要的，将子进程的输入输出原封不动的传回给父进程，这样一来体验就与直接执行命令无异（指各种命令行动画和文字颜色这种）

所以最终我们可以像下面这样写个，比如说myBuild.js

1
const { spawnSync } = require("child_process");
2
const { resolve } = require("path");
3

4
spawnSync("npm", ["run", "build"], {
5
  shell: true,
6
  env: {
7
    ...process.env, // 要记得导入原本的环境变量
8
    VUE_CLI_SERVICE_CONFIG_PATH: resolve(__dirname, "my.vue.config.js"),
9
  },
10
  stdio: "inherit",
11
});

然后我们就可以添加一个 npm script 了，"build:my": "node myBuild.js"

拓展#

我们可以做的更通用化一点，接受一个参数来指定配置文件，做到可以写成"build:my": "node build.js my.vue.config.js"这样的效果，这里就不详细说了