简介 

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

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

"scripts": {
   "dev": "vue-cli-service serve",
   "serve": "vue-cli-service serve",
   "build": "vue-cli-service build",
   "build:test": "vue-cli-service build --mode test",
   "build:pre": "vue-cli-service build --mode pre",
   "lint": "vue-cli-service lint",
   "test:unit": "vue-cli-service test:unit"
 },

命名规则 

属性名必须以VUE_APP_开头，比如VUE_APP_XXX

对应配置文件有

.env                        全局默认配置文件，不论什么环境都会加载合并
.env.development   开发环境下的配置文件
.env.production       生产环境下的配置文件

.env.test                  测试环境

"scripts": {
   "dev": "vue-cli-service serve",
   "serve": "vue-cli-service serve",
   "build": "vue-cli-service build",
   "build:test": "vue-cli-service build --mode test",
   "build:pre": "vue-cli-service build --mode pre",
   "lint": "vue-cli-service lint",
   "test:unit": "vue-cli-service test:unit"
 },

不同的模式会有不同的环境变量NODE_ENV
在 development 模式下 NODE_ENV 的值会被设置为 “development”
在 production 模式下 NODE_ENV 的值会被设置为 “production”

关于文件的加载

1. .env 无论开发环境还是生产环境都会加载的配置文件
2. .env.development 开发环境加载的配置文件
3. .env.production 生产环境加载的配置文件
4. 研发环境 加载顺序：.env .env.development 同一个变量名 后者会覆盖前者
5. 生产环境 加载顺序：.env .env.production 同一个变量名 后者会覆盖前者

1. 根据启动命令vue会自动加载对应的环境，vue是根据文件名进行加载
2. 比如执行npm run serve命令，会自动加载.env.development文件
3. 注意：.env文件无论是开发还是生成都会加载
4. 如过我们运行npm run serve 在就先加载.env文件，之后加载.env.development文件，
5. 两个文件有同一个项，则后加载的文件就会覆盖掉第一个文件，
6. 即.env.development文件覆盖掉了.env文件的NOOE_ENV选项。
7. 同理如果npm run build 就执行了.env和.env.production。
    

你可以通过传递 --mode 选项参数为命令行覆写默认的模式。

例如，如果你想要在构建命令中使用开发环境变量：vue-cli-service build --mode development

为什么我们本地启加载 .env.development 服务器加载 .env.production ？？

我们平常通过npm run serve启动时，我们本地系统的环境变量NODE_ENV 值设置为 development，这时就会先后加载.env和.env.development这两个文件。

而当我们打包到服务器后，服务器的NODE_ENV值被设置为production，则此时Vue仍会先加载.env文件，然后加载.env.production文件。

强调一下

process.env.NODE_ENV默认只有两种状态即development和production。

development指代本地开发即localhost环境（本地的开发），

production代表发布在任何服务上的服务（不管是dat、uat还是生产环境）

node是不知道你服务是测试还是正式，除非你手动指定。

通常认为都是线上环境。所以可以这样认为development代表本地开发环境，production代表线上环境（包括dat、uat和生产环境等）

为什么会强调这一点呢？
因为有人居然用process.env.NODE_ENV中的development来代表dat，uat等线上的测试环境，所以特别强调一下，development代表本地的开发环境。