vue-cli 中 .env 的实践

1. 介绍

关于 .env 在项目中的应用

2. 环境

2.1. 配置文件

环境文件：

project/

  .env          # 公共配置

  .env.dev      # dev 环境个性化配置

  .env.sit2     # sit2 环境个性化配置

  .env.sit1     # sit1 环境个性化配置

  .env.prod     # prod 环境个性化配置

最佳实践：

• .env: 通用配置，所有配置(使用 .env.dev 的环境变量的值)
• .env.*: 差异配置

2.2. NPM Scripts

说明：

• NODE_ENV: 区分 serve 和 build
• --mode: 指定配置文件

配置: (package.json)

{
  "scripts": {
    "serve:dev": "cross-env NODE_ENV=development vue-cli-service serve --mode dev",
    "serve:sit2": "cross-env NODE_ENV=development vue-cli-service serve --mode sit2",
    "serve:sit1": "cross-env NODE_ENV=development vue-cli-service serve --mode sit1",
    "serve:prod": "cross-env NODE_ENV=development vue-cli-service serve --mode prod",

    "build:dev": "cross-env NODE_ENV=production vue-cli-service build --mode dev",
    "build:sit2": "cross-env NODE_ENV=production vue-cli-service build --mode sit2",
    "build:sit1": "cross-env NODE_ENV=production vue-cli-service build --mode sit1",
    "build:prod": "cross-env NODE_ENV=production vue-cli-service build --mode prod",

    "analyze:prod": "cross-env NODE_ENV=production ANALYZE=YES vue-cli-service build --mode prod",

    "build:all": "npm run build:sit2 && npm run build:sit1 && npm run build:prod"
  },
}

注意：

• 执行 vue-cli-service serve/build 时，NODE_ENV 默认为 development
• 也就是说，一旦指定了 --mode 参数，就必须手动指定 NODE_ENV
• .env.* 文件中的环境变量的优先级低于 cross-env 配置的环境变量

3. 打印

说明：

• 构建时，打印所有环境变量，便于校对

示例：(vue.config.js)

const PropertiesReader = require('properties-reader');

const properties = PropertiesReader('.env');

printCustomEvnVars();

function printCustomEvnVars() {
  properties.each((key) => {
    console.log(`${key} = ${process.env[key]}`);
  });
}