[2] 模式与环境变量

mode模式

在新版 Vue CLI 的项目中，我们一般在项目根目录放置几个环境文件：

代码块

JSON

.env.development  // 开发（development）模式的环境文件,只有开发模式时才会被载入。
.env.production // 生产(production)模式的环境文件

符合官方文档中提到的如下模式：

.env.[mode]   # 只在指定的模式中被载入

根据模式 mode，执行对应的环境文件，注入环境变量

例如 --mode development 则执行 vue-cli-service时， 去执行.enc.development 环境文件。

3个默认模式：

• development 模式用于 vue-cli-service serve
• test 模式用于 vue-cli-service test:unit
• production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e

NODE_ENV 环境变量

NODE_ENV 将决定您的应用运行的模式，是开发，生产还是测试。

如果文件内部不包含 NODE_ENV 变量，它的值将取决于模式【mode】。

Vue-Cli只支持3种环境变量

• VUE_APP_* ： VUE_APP 开头的变量
• NODE_ENV
• BASE_URL 源码cli-service/lib/util/resolveClientEnv.js

const prefixRE = /^VUE_APP_/

module.exports = function resolveClientEnv (options, raw) {
  const env = {}
  Object.keys(process.env).forEach(key => {
    if (prefixRE.test(key) || key === 'NODE_ENV') {
      env[key] = process.env[key]
    }
  })
  env.BASE_URL = options.publicPath

  if (raw) {
    return env
  }

  for (const key in env) {
    env[key] = JSON.stringify(env[key])
  }
  return {
    'process.env': env
  }
}

解析：

一开始定义了 constprefixRE = /^VUE_APP_/ 环境变量。 env 默认是一个对象，循环 process.env【环境变量】 分解成几部分：

• 匹配上 prefixRE.test(key) 或者 key 是 NODE_ENV 的
• 一直用的 BASE_URL： 为 options.publicPath