浅析vue-cli如何配置NODE_ENV等各种环境变量及NODE_ENV设置为test、development以及其他值时会出现什么情况

一、环境变量配置

　　在项目开发中我们需要配置环境变量：开发环境，生产环境和测试环境。在cli 2.0的版本中我们是通过在config文件夹进行配置的，vue/cli 3.0相对简单，只需要在项目根目录创建 .env 文件即可。以下是环境对应文件名和命令

模式	对应npm命令	对应文件名称
development	server	.env.development
production	build	.env.production
test	test	.env.test

　　需要注意的是： process.env.NODE_ENV 为默认变量，会自动设置为上边对应的模式名称

　　其他变量必须以 VUE_APP_ 开头，被载入的变量将会被vue-cli-service的所有命令、插件、依赖可用。

二、自定义模式

　　默认的三种模式也许并不能满足我们的所有使用场景，使用自定义模式可以很好地解决这个问题。比如我们的测试网址，就需要一个自定义 gray 模式。

// 1、修改package.json添加一行命令
"gray": "vue-cli-service build --mode gray"
// 2、添加.env.gray文件：在项目根路径创建.env.gray文件，内容为
NODE_ENV = production
VUE_APP_URL=https://**.cc/

　　现在 gray 环境就会自动引用自己环境内的变量啦，需要注意的是NODE_ENV的名字打包时为production，开发运行为development，否则会造成环境找不到对应的模式配置，打包出的项目体积也会巨大无比。

　　关于 .env 文件中的内容：VUE_APP_URL 是在 .env.* 文件中定义的，在项目启动时，vue-cli 会将以 VUE_APP_ 开头的变量读取至环境变量，这是 vue-cli 强制要求的。“你想用我的工具，就得遵循我定的规则”。其实这背后是一系列工具链（webpack + dotenv + webpack DefinePlugin）相互作用的成果。

三、NODE_ENV 设置为 test、development 以及 其他值时会出现什么情况？

　　在自定义配置Vue-cli 的过程中，突然有了下面的疑问：为什么打包扔测试环境时，不能直接改变其 NODE_ENV 值，而是通过VUE_APP_ENV_NAME (以VUE_APP_开头的变量)来区分呢？

　　后来想想这是不同的配置策略导致的，虽然我扔的是测试环境，但构建出来的包还是要生产环境的包，由此我又产生了另一个疑问：我在vue-cli-service build 时，NODE_ENV 设置成其他值，会发生什么？打出来的包是什么样子？

1、下面说说如果直接改变其 NODE_ENV 值会发生什么？

　　简单来说，打包出来的文件会跟production模式下打包的文件不一样，没有集成production包的各个优点。具体来说会有下面几种情况：

（1）直接 NODE_ENV = ‘test’， 它会创建一个优化过，并且旨在用于单元测试的 webpack 配置，它并不会处理图片以及一些对单元测试非必需的其他资源。表面来看，就是没有进行代码分割只有一个js文件，以及没有hash等。

（2）NODE_ENV=“development”，它会创建一个 webpack 配置，该配置启用热更新，但不会对资源进行 hash 也不会打出 vendor bundles，打包出来的文件跟NODE_ENV="development"模式下打出来的包一样。

（3）NODE_ENV=“someone”，环境变量随便给一个值，它会默认为NODE_ENV=“development” 的打包策略。包内的内容如下：

　　所以运行 vue-cli-service build 命令时，无论部署到哪个环境，都应该始终把 NODE_ENV 设置为 “production“ ，区别环境时可以以 VUE_APP_ 开头的变量命名赋值。

　　详见官方文档：https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC%8F