[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 靜態嵌入到業務代碼中