env配置文件

在现代前端项目中.env文件随处可见，里面都是一些项目中的配置项，能够在项目中拿来就用，那么.env文件在前端工程化中用处和意义是什么呢？

.env文件用来指定环境变量，在Vue CLI中定义，想要了解解析环境文件规则的细节，请参考 dotenv。在Vue CLI 3.5+中也使用 dotenv-expand 来实现变量扩展。

你可以在你的项目根目录中放置下列文件来指定环境变量：

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入，但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略           

env配置文件只包含环境变量的“键=值”对：

NODE_ENV=production
VUE_APP_PREVIEW=false
VUE_APP_API_BASE_URL=/api           

不要在你的应用程序中存储任何机密信息（例如私有 API 密钥），环境变量会随着构建打包嵌入到输出代码，意味着任何人都有机会能够看到它。

除了 VUE_APP_ 变量之外。还有两个特殊的变量：

• NODE_ENV： 是 development、production、test 中的一个。其值取决于应用运行的模式。
• BASE_URL： 和 vue.config.js 中的 publicPath 选项相符，即你的应用会部署到的基础路径

请注意，只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。这是为了避免意外公开机器上可能具有相同名称的私钥。

mode

vueCli 命令中 --mode 对应的 .env.[mode]，而不是 NODE_ENV

模式是 Vue CLI 项目中一个重要的概念。默认情况下，一个 Vue CLI 项目有三个模式：

• development 模式用于 vue-cli-service serve
• test 模式用于 vue-cli-service test:unit
• production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e

你可以通过传递 --mode 选项参数为命令行覆写默认的模式。例如，如果你想要在构建命令中使用开发环境变量：

vue-cli-service build --mode development           

运行 vue-cli-service 命令时，所有的环境变量都从对应的环境文件中载入。如果文件内部不包含 NODE_ENV 变量，它的值将取决于模式，例如，在 production 模式下被设置为 "production"，在 test 模式下被设置为 "test"，默认则是 "development"。

NODE_ENV

NODE_ENV 将决定您的应用运行的模式，是开发，生产还是测试，因此也决定了创建哪种 webpack 配置。

例如通过将 NODE_ENV 设置为 "test"，Vue CLI 会创建一个优化过后的，并且旨在用于单元测试的 webpack 配置，它并不会处理图片以及一些对单元测试非必需的其他资源。

同理，NODE_ENV=development 创建一个 webpack 配置，该配置启用热更新，不会对资源进行 hash 也不会打出 vendor bundles，目的是为了在开发的时候能够快速重新构建。

当你运行 vue-cli-service build 命令时，无论你要部署到哪个环境，应该始终把 NODE_ENV 设置为 "production" 来获取可用于部署的应用程序。

process.env

如今的前端项目都是用 Node 来作为辅助开发工具，而 process 是 Node.js 中的 一个全局变量，提供来有关当前 Node.js 进程的信息并对其进行控制。而 process 中的 env 则是返回包含用户环境的对象。通俗点说，就是能够经过 process.env 拿到当前node进程的运行环境的信息，这里也包括.env文件里指定的环境变量，因此在node环境下可以通过如下代码获取环境变量对应的值。

const version=process.env.NODE_ENV||"development";           

process.env包含着关于系统环境的信息，但是process.env中并不存在NODE_ENV这个环境变量，需要我们在配置文件中指定，NODE_ENV是一个用户自定义的变量，在webpack中它的用途是判断生产环境或开发环境。

env 文件的语法高亮显示

如果您使用 VS Code，您将需要添加dotenv 插件。这会.env通过语法突出显示来点亮文件的内容，并且只是简单地使用.env文件中的变量更容易。

参考

https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC%8F

http://www.javashuo.com/article/p-mfmbbhxu-ew.html

https://www.cnblogs.com/guojikun/p/15160737.html

https://webpack.js.org/plugins/define-plugin/#usage

https://medium.com/the-node-js-collection/making-your-node-js-work-everywhere-with-environment-variables-2da8cdf6e786