vue 更优雅的打包到不同运行环境

开发中难免会存在不同环境不同配置的情况，比如：开发环境，测试环境，准线环境，线网环境等等。如何更方便的处理不同环境打包是必须要考虑的。本文简单介绍一种相对优雅的处理方式。

vue 在打包不同环境时，可以通过官方提供的 .env 配置不同环境变量，此处配置的环境变量可以通过 --mode xxxx 参数指定用哪种配置打包。

需要在注意的是，只有以 VUE_APP_ 开头的变量才能被引入！

同时需要在 package.json 文件中新增 scripts 命令即可编译不同环境。

使用方式

新增文件：

.env.development
.env.test
.env.preview
.env.production

package.json 新增命令：

{
  "scripts": {
    "dev": "vue-cli-service serve --mode development",
    "build:test": "vue-cli-service build --mode test",
    "build:preview": "vue-cli-service build --mode preview",
    "build:prod": "vue-cli-service build --mode production"
  }
}

添加以上脚本之后，即可使用 npm run build:xxx 打包不同环境。

美中不足之处是需要记住三个命令，而不是一个命令，那么有没有比较方便的一种方式呢？

inquirer.js

此处介绍一个 nodejs 的插件 inquirer.js npm 地址 github地址。

此插件可通过交互式的命令行获取需要的信息，许多脚手架的开发都用到了此插件，比如 vue-cli 等。

有此插件，便可在控制台询问需要打包的环境，然后运行不同的打包命令。由于此插件有 vue-cli 依赖，所以不需要再安装，如果实在不放心，也可运行 npm install --save-dev inquirer 安装一下插件。

废话不多，看代码：

项目根目录新建 build.js：

const inquirer = require('inquirer')
const child_process = require('child_process')

inquirer.prompt([{
  name: 'buildType',
  message: '请选择打包的运行环境<上下方向键选择回车即可。如无法选择，可直接输入数字回车即可>',
  type: 'rawlist',
  choices: [new inquirer.Separator(), '准线环境', new inquirer.Separator(), '线网环境', new inquirer.Separator(), '测试环境']
}]).then((answers) => {
  // Use user feedback for... whatever!!
  switch (answers.buildType) {
    case '准线环境':
      child_process.execSync('npm run build:preview', { stdio: [0, 1, 2] }) // 配置参考： http://nodejs.cn/api/child_process.html#child_process_options_stdio
      break
    case '线网环境':
      child_process.execSync('npm run build:prod', { stdio: [0, 1, 2] })
      break
    case '测试环境':
      child_process.execSync('npm run build:test', { stdio: [0, 1, 2] })
      break
  }
}).catch((error) => {
  if (error.isTtyError) {
    // Prompt couldn't be rendered in the current environment
    console.log('运行出错，请使用系统自带控制台运行此命令')
  } else {
    // Something else went wrong
    console.error(error)
  }
})

package.json 新增命令：

{
  "scripts": {
    "dev": "vue-cli-service serve --mode development",
    "build": "node build.js",
    "build:test": "vue-cli-service build --mode test",
    "build:preview": "vue-cli-service build --mode preview",
    "build:prod": "vue-cli-service build --mode production"
  }
}

然后控制台执行 npm run build，即可通过选择的方式来打包不同环境:

问题

1. windows 平台 git bash 运行 npm run build 无法通过上下键选择，只能通过输入数字来确认，但如果直接执行 node index.js 是可以选择的，原因跟vue cli 问题一样，执行 winpty npm.cmd run build即可。

2. windows 平台如果 cmd 运行 npm run build 未选择，然后通过 ctrl + c 终止命令会报错，原因是 inquirer.js 中有一行(github) process.kill(process.pid, 'SIGINT') 终止进程导致，如果直接执行 node index.js 无此问题。

本文由 linx(544819896@qq.com) 创作，采用 CC BY 4.0 CN协议 进行许可。 可自由转载、引用，但需署名作者且注明文章出处。本文链接为： https://blog.jijian.link/2021-06-17/vue-build-env/

如果您觉得文章不错，可以请我喝一杯咖啡！

赏