让你秒懂 Vue .env .env.development .env.production

1. 项目根目录下创建.env、.env.development和.env.production三个文件，文件名解释分别如下：
   　　.env 无论开发环境还是生产环境都会加载的配置文件
   　　.env.development 开发环境加载的配置文件
   　　.env.production 生产环境加载的配置文件

2. 环境变量的简单使用示例。需要注意，配置文件里的属性名必须以VUE_APP_开头，比如在.env文件这样声明一个环境变量：

   VUE_APP_QQQ = `QQ`
   

   然后就可以在代码里这样用了：

   console.log(process.env.VUE_APP_QQQ)  // -> `QQ`
   

3. 那为什么是三个文件呢？
   比如现在三个文件里内容分别如下：

   // .env
   VUE_APP_QQQ = `QQ`
   

   // .env.development
   VUE_APP_QQQ = `WW`
   

   // .env.production
   VUE_APP_QQQ = `RR`
   

   那么首先，Vue在启动时，无论是在开发环境还是在生产环境，它始终都会加载.env文件里的内容，然后（划重点）=>根据Node环境变量'NODE_ENV'的值来选择加载'development'还是'production'。

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

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

   其次，在按顺序加载文件时，Vue会把后一个加载的文件内容和前面加载的文件内容进行比较，如果存在变量名相同，那么它会采用后一个文件里的变量值为变量的最终值。

   拿上面三个文件内容打个比方：我们在日常开发时，NODE_ENV值是development，那么Vue就会首先加载.env文件里的内容，然后继续加载.env.development文件里的内容。那么我们发现变量名VUE_APP_QQQ存在多个，这时Vue就会采用后一个文件里的变量值为变量的最终值。因此我们通过console输出看一看。

   console.log(VUE_APP_QQQ)  // -> `WW`
   

看完秒懂的记得点个赞，你的支持是我创作的动力。
关注我，你会多一个宝藏。