[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` 静态嵌入到业务代码中
