区分开发环境、测试环境、生产环境不同访问地址的配置系列--（二）了解.env .env.development .env.production

一，三者的区别

通常情况下。我们会在根目录下创建.env .env.development .env.production的三个文件：

	.env 无论开发环境还是生产环境都会加载的配置文件
　　.env.development 开发环境加载的配置文件
　　.env.production 生产环境加载的配置文件

二，环境变量的简单使用示例。

需要注意，配置文件里的属性名必须以VUE_APP_开头，
.env文件内容：

VUE_APP_testName = '无论开发还是生产环境都会执行的内容'

.env.development文件内容：

VUE_APP_testName = '测试环境下内容'

.env.production文件的内容

VUE_APP_testName = '生产环境下的内容'

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

三，node环境变量又是啥，为什么能用来判定是加载development还是production？

这就要从node的全局变量process说起。

如果不清楚node的全局变量是啥？就想想node的另一个全局变量global。它也是一个对象，里面有：

__dirname: 当前文件所在文件夹的绝对路径
__filename: 当前文件的绝对路径
setInterval / clearInterval : 和浏览器中window对象上的定时器一样
setTimeout /  clearTimeout : 和浏览器中window对象上的定时器一样
console :  和浏览器中window对象上的打印函数一样

这么一系列的属性，这样就熟悉多了吧！！

第一点：

在 node 中，全局变量 process 表示的是当前的 node 进程。process.env 包含着有关系统环境的信息。

也就是说，process是node运行环境的一个底层已经创建好的全局变量，里面存储着这个node环境相关的配置信息，假设本地用node运行一个js代码，就可以直接打印出这个process。

而浏览器的console中是无法打印出这个的，因为那是浏览器环境，而不是node环境，这两者是有区别的。

第二点：process.env.NODE_ENV是啥？

但是 process.env 中并不存在 NODE_ENV 这个东西。NODE_ENV 是用户一个自定义的变量，在 webpack 中的用途是判断生产环境或开发环境还是测试环境的依据。
换句话说，就是webpack里面已经给process.env 这个对象配置了一个名为NODE_ENV的属性。并且是用这个属性来判断是生产环境或开发环境还是测试环境

回到之前的话题。

我们平常通过npm run serve启动时，我们本地系统的环境变量NODE_ENV 值就会被webpack默认设置成是development，

这时候，我们在项目中如main.js中打印一下：

console.log(process.env.NODE_ENV)

并且当我们执行npm run serve的时候，就会先执行.env后执行.env.development这两个文件，

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

再看之前配置的三个文件，若这个项目已经用npm run serve运行起来后，在main.js中直接打印这个变量：

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

也就是此时打印：

console.log(process.env.NODE_ENV)   //production