[Vue CLI 3] 环境变量和模式配置实践与源码分析

在官方文档中，我们可以看到在新版本的 Vue CLI 中去掉了我们熟悉的 config 目录

比如之前在 prod.env.js 中我们会如下配置：

'use strict'module.exports = {  NODE_ENV: '"production"'}

然后再代码里面也可以通过 process.env.NODE_ENV 进行一些环境代码的判断

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

.env.development.env.production

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

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

里面的内容不是之前的那种对象了，只是键=值

VUE_APP_API_PREFIX=http://****

当我们执行 vue-cli-service 时候会使用：

在文件 lib/Service.js 中 init 函数：

init (mode = process.env.VUE_CLI_MODE) {  // load mode .env

  if (mode) {    this.loadEnv(mode)

  }  // load base .env

  this.loadEnv()

}

我们看一下

loadEnv (mode) {  const basePath = path.resolve(this.context, `.env${mode ? `.${mode}` : ``}`)  const localPath = `${basePath}.local`

  const load = path => {

  }

}

在 load 函数内部：

const res = loadEnv(path)

这里的 loadEnv 来自: util/loadEnv.js 文件

const loadEnv = require('./util/loadEnv')

我们看看文件内部：

依赖了 fs 模块

const fs = require('fs')

对外暴露了一个函数 loadEnv，接受一个参数 path，默认值是 '.env'

最终赋值给了 process.env

module.exports = function loadEnv (path = '.env') {  const config = parse(fs.readFileSync(path, 'utf-8'))  Object.keys(config).forEach(key => {    if (typeof process.env[key] === 'undefined') {

      process.env[key] = config[key]

    }

  })  return config

}

parse 函数就是处理上面提到的键=值，具体如下：

以换行符号来循环，用正则匹配出内容

function parse (src) {  const res = {}

  src.split('\n').forEach(line => {    // matching "KEY' and 'VAL' in 'KEY=VAL'

    const keyValueArr = line.match(/^\s*([\w\.\-]+)\s*=\s*(.*)?\s*$/)    // matched?

    if (keyValueArr != null) {      const key = keyValueArr[1]      let value = keyValueArr[2] || ''

      // expand newlines in quoted values

      const len = value ? value.length : 0

      if (len > 0 && value.charAt(0) === '"' && value.charAt(len - 1) === '"') {

        value = value.replace(/\\n/gm, '\n')

      }      // remove any surrounding quotes and extra spaces

      value = value.replace(/(^['"]|['"]$)/g, '').trim()

      res[key] = value

    }

  })  return res

}

在使用的时候，请注意

只有以 VUE_APP_ 开头的才可以使用

我们看一下代码实现的原理：

cli-service/lib/util/resolveClientEnv.js

一开始定义了一个正则：

const prefixRE = /^VUE_APP_/

对外暴露了一个函数：resolveClientEnv 接受 2 个参数： options 和 raw

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.baseUrl  if (raw) {    return env

  }  for (const key in env) {

    env[key] = JSON.stringify(env[key])

  }  return {    'process.env': env

  }

}

env 默认是一个对象，循环 process.env

分解成几部分：

• 匹配上 prefixRE.test(key) 或者 key 是 NODE_ENV 的

• 一直用的 BASE_URL：

env.BASE_URL = options.baseUrl

这个函数会被 2 个地方用到，我们这里只提和业务代码有关系的那个：cli-service/lib/config/app.js

看过我们之前的 webpack-chain 文章的应该很熟悉：

const resolveClientEnv = require('../util/resolveClientEnv')

    webpackConfig

      .plugin('define')

        .use(require('webpack/lib/DefinePlugin'), [

          resolveClientEnv(options)

        ])

它会被 webpack.DefinePlugin 静态嵌入到业务代码中

作者：dailyvuejs
链接：https://www.jianshu.com/p/557e98040312