Vue-cli3 配置环境变量与分环境打包

配置环境变量

在前端项目开发完成后，在发布的时候，我们会需要将项目部署到不同环境，例如开发，测试，预发布，生产。

这个时候就需要前端项目根据部署的环境，配置 环境变量 进行打包。

我们可以在前端项目的根目录下新增以下 环境变量文件：

.env                # 在所有的环境中都会被载入
.env.local          # 在所有的环境中都会被载入,会被 git 忽略
.env.[mode]         # 在指定的模式中被载入
.env.[mode].local   # 在指定的模式中被载入, 会被 git 忽略
.env.develop        # 示例

环境变量文件只包含环境变量的 键值对，例如

1 2	// 接口地址 VUE_APP_BASE_URL = 'xxx'

除了自定义的 VUE_APP_* 变量之外，环境变量文件中还有 2 个特殊的变量：

1 2	NODE_ENV # develop、production、test 中的一个。具体的值取决于运行的模式 BASE_URL # 与 vue.config.js 中的 publicPath 相同，即应用会部署到的基础路径

为一个指定模式的准备环境变量文件如 .env.staging 会比一般的环境变量文件 .env 拥有更高的优先级。

Vue-cli3 模式概念

模式是 vue-cli 项目中的一个重要概念，一般情况下会有 3 个模式：

1
2
3

development 模式用于 vue-cli-service serve                               # 默认 NODE_ENV=development
production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e    # 默认 NODE_ENV=production
test 模式用于 vue-cli-service test:unit

模式不等同于 NODE_ENV, 一个模式可以包含多个环境变量

可以通过传递 --mode 选项参数覆写默认的模式，例如使用 .env.staging 的环境变量

1	"staging": "vue-cli-service build --mode staging"

.env.staging 文件

// 表明这是生产环境，webpack需要打包
NODE_ENV='production'

VUE_APP_BASE_URL='xxxx'

这样使用 npm run staging 命令的时候, 只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中，即可以在项目代码中使用，例如 process.env.VUE_APP_BASE_URL 就可以获取环境变量文件中的值。

理解指令、模式、环境变量间的关系

在 vue-cli3 中有一个 vue-cli-service 的命令，可以在 package.json 中看到。

vue-cli-service 命令

用法：
vue-cli-service serve [options] [entry]
对应 development 模式

选项：
  --open    在服务器启动时打开浏览器
  --copy    在服务器启动时将 URL 复制到剪切版
  --mode    指定环境模式 (默认值：development)
  --host    指定 host (默认值：0.0.0.0)
  --port    指定 port (默认值：8080)
  --https   使用 https (默认值：false)

vue-cli-service build [options] [entry|pattern]
对应 production 模式

选项：
  --mode         指定环境模式 (默认值：production)
  --dest         指定输出目录 (默认值：dist)
  --modern       面向现代浏览器带自动回退地构建应用
  --target       app | lib | wc | wc-async (默认值：app)
  --name         库或 Web Components 模式下的名字 (默认值：package.json 中的 "name" 字段或入口文件名)
  --no-clean     在构建项目之前不清除目标目录
  --report       生成 report.html 以帮助分析包内容
  --report-json  生成 report.json 以帮助分析包内容
  --watch        监听文件变化

当运行以下命令

1	"staging": "vue-cli-service build --mode staging"

如果 env.staging 文件未声明 NODE_ENV=production 则 webpack 会以开发模式打包。

参考