前言

在开始之前，我们先来看下官方文档说明；查看[vue-cli文档](https://cli.vuejs.org/zh/guide/mode-and-env.html#示例：staging-模式)中有这么一句话：

只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。

由此我们可以知道，`vue-cli` 是有针对 `VUE_APP_` 这个变量进行配置。接下来让我们查看源码，看下`vue-cli`是怎么实现的。

源码分析

查看根路径的 `package.json` 文件我们可以知道，当执行 `npm run serve` 时会执行 `vue-cli-service`；所以我们找到该文件的执行地址`node_modules/@vue/cli-service`。

分析其 `package.json` 我们知道，当我们执行 `vue-cli-service` 时候会调用文件 `lib/Service.js` 中 `init` 函数：

init (mode = process.env.VUE_CLI_MODE) {
 ...
 this.mode = mode
 // load mode .env
 if (mode) {
 this.loadEnv(mode)
 }
 // load base .env
 this.loadEnv()
 ...
 }

紧接着我们再来看`loadEnv`方法

loadEnv (mode) {
 const logger = debug('vue:env')
 const basePath = path.resolve(this.context, `.env${mode ? `.${mode}` : ``}`)
 // 注意这里，不管你有没有定义它都会在后面加上一个.local的后缀，感觉这里不是很好
 const localPath = `${basePath}.local`
 const load = path => {
 try {
 const env = dotenv.config({ path, debug: process.env.DEBUG })
 dotenvExpand(env)
 logger(path, env)
 } catch (err) {
 // only ignore error if file is not found
 if (err.toString().indexOf('ENOENT') < 0) {
 error(err)
 }
 }
 }
 load(localPath)
 load(basePath)
 ...
}

这里会先调用 `dotenv`（位于 `node_modules/dotenv` ）的 `config` 函数，最终会返回这样的格式 `{ parsed: { YOUR_ENV_KEY: '你设定的环境变量值' } }`。

并且我们可以看到，这里已经将值存放到`process.env`中了。

function config (options /*: ?DotenvConfigOptions */) /*: DotenvConfigOutput */ {
 ...
 try {
 // specifying an encoding returns a string instead of a buffer
 const parsed = parse(fs.readFileSync(dotenvPath, { encoding }), { debug })
 Object.keys(parsed).forEach(function (key) {
 if (!process.env.hasOwnProperty(key)) {
 process.env[key] = parsed[key]
 } else if (debug) {
 log(`"${key}" is already defined in \`process.env\` and will not be overwritten`)
 }
 })
 return { parsed }
 } catch (e) {
 return { error: e }
 }
}

这里再说下 `parse` 方法，会读取你设置的所有 `.env` 文件，然后将里面的数据转换成对象，简单来说就是 `以换行符号来循环，用正则匹配出内容`，最终形成以`{key: value}`的格式输出。

const NEWLINE = '\n'
const RE_INI_KEY_VAL = /^\s*([\w.-]+)\s*=\s*(.*)?\s*$/
const RE_NEWLINES = /\\n/g
function parse (src /*: string | Buffer */, options /*: ?DotenvParseOptions */) /*: DotenvParseOutput */ {
 const debug = Boolean(options && options.debug)
 const obj = {}
 // convert Buffers before splitting into lines and processing

 src.toString().split(NEWLINE).forEach(function (line, idx) {
 // matching "KEY' and 'VAL' in 'KEY=VAL'
 const keyValueArr = line.match(RE_INI_KEY_VAL)
 // matched?
 if (keyValueArr != null) {
 const key = keyValueArr[1]
 // default undefined or missing values to empty string
 let val = (keyValueArr[2] || '')
 const end = val.length - 1
 const isDoubleQuoted = val[0] === '"' && val[end] === '"'
 const isSingleQuoted = val[0] === "'" && val[end] === "'"
 // if single or double quoted, remove quotes
 if (isSingleQuoted || isDoubleQuoted) {
 val = val.substring(1, end)
 // if double quoted, expand newlines
 if (isDoubleQuoted) {
 val = val.replace(RE_NEWLINES, NEWLINE)
 }
 } else {
 // remove surrounding whitespace
 val = val.trim()
 }
 obj[key] = val
 } else if (debug) {
 log(`did not match key and value when parsing line ${idx + 1}: ${line}`)
 }
 })
 return obj
}

然后我们再来看下 `dotenvExpand` 方法，找到它位于 `node_modules/dotenv-expand` 下，这里就没啥好说的，就是将几个环境变量的值放到一起

接下来让我们回到开头说的 `只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中`，这个是在那里配置的呢？

我们知道 `vue-cli` 会对 `webpack` 进行配置扩展，所以我们发现在 `cli-service/lib/config/app.js` 中

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

webpackConfig
 .plugin('define')
 .use(require('webpack/lib/DefinePlugin'), [
 resolveClientEnv(options)
 ])

我们接着找到 `resolveClientEnv` 方法，可以看到是在这里定义的，并且会将非 `VUE_APP_` 开头的过滤掉

const prefixRE = /^VUE_APP_/
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]
 }
 })
 // 需要注意的是 `baseUrl` 从 `Vue CLI 3.3` 起已弃用，请使用 `publicPath` 。以下源码涉及此改动
 env.BASE_URL = options.publicPath
 if (raw) {
 return env
 }
 for (const key in env) {
 env[key] = JSON.stringify(env[key])
 }
 return {
 'process.env': env
 }
}

### 总结

1. `.env` 和 `.env.local` 定义的环境变量会被全局引用，并会与其它环境变量合并

2. 声明环境变量必须以 `VUE_APP_` 开头，不然会被过滤掉

3. 除了 `VUE_APP_*` 变量之外，在你的应用代码中始终可用的还有两个特殊的变量：`NODE_ENV` 和 `BASE_URL`

最后，谢谢大家的观看，如果想观看我的更多文章，请[点击前往](https://github.com/Echi1993/Echi1993.github.io)。

如果对您有帮助,请为我点个小星星。

也欢迎大家交流分享自己的开发心得~