在官方文檔中媒佣，我們可以看到在新版本的 Vue CLI 中去掉了我們熟悉的 config 目錄
比如之前在 prod.env.js 中我們會如下配置：
'use strict'
module.exports = {
NODE_ENV: '"production"'
}
然后再代碼里面也可以通過 process.env.NODE_ENV 進(jìn)行一些環(huán)境代碼的判斷
在新版 Vue CLI 的項(xiàng)目中，我們一般在項(xiàng)目根目錄放置幾個(gè)文件：
.env.development
.env.production
符合官方文檔中提到的如下模式：
.env.[mode] # 只在指定的模式中被載入
里面的內(nèi)容不是之前的那種對象了魁淳，只是鍵=值
VUE_APP_API_PREFIX=http://****
當(dāng)我們執(zhí)行 vue-cli-service 時(shí)候會使用：
在文件 lib/Service.js 中 init 函數(shù)：
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 函數(shù)內(nèi)部：
const res = loadEnv(path)
這里的 loadEnv 來自: util/loadEnv.js 文件
const loadEnv = require('./util/loadEnv')
我們看看文件內(nèi)部：
依賴了 fs 模塊
const fs = require('fs')
對外暴露了一個(gè)函數(shù) loadEnv琅催，接受一個(gè)參數(shù) path，默認(rèn)值是 '.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 函數(shù)就是處理上面提到的鍵=值滩愁，具體如下：
以
換行符號來循環(huán)躯喇，用正則匹配出內(nèi)容
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
}
在使用的時(shí)候，請注意
只有以 VUE_APP_ 開頭的才可以使用
我們看一下代碼實(shí)現(xiàn)的原理：
cli-service/lib/util/resolveClientEnv.js
一開始定義了一個(gè)正則：
const prefixRE = /^VUE_APP_/
對外暴露了一個(gè)函數(shù)：resolveClientEnv 接受 2 個(gè)參數(shù)： 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 默認(rèn)是一個(gè)對象硝枉，循環(huán) process.env
分解成幾部分：
匹配上 prefixRE.test(key) 或者 key 是 NODE_ENV 的
一直用的 BASE_URL：
env.BASE_URL = options.baseUrl
這個(gè)函數(shù)會被 2 個(gè)地方用到廉丽，我們這里只提和業(yè)務(wù)代碼有關(guān)系的那個(gè)：cli-service/lib/config/app.js
看過我們之前的 webpack-chain 文章的應(yīng)該很熟悉：
const resolveClientEnv = require('../util/resolveClientEnv')
webpackConfig
.plugin('define')
.use(require('webpack/lib/DefinePlugin'), [
resolveClientEnv(options)
])
它會被 webpack.DefinePlugin 靜態(tài)嵌入到業(yè)務(wù)代碼中
