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