关于vue项目环境变量配置的问题

在我们开发过程中，经常会遇到开发过程中和生产环境中环境变量不同的情况，最常见的为请求的接口地址。打包之前需要手动切换，这样比较琐碎。我们可以运用node的环境变量来解决。

我们可以定义一个变量:

定义baseUrl变量

那么process.env.NODE_ENV是什么呢？

1、官方解释：process 对象是一个 global （全局变量），提供有关信息，控制当前 Node.js 进程。作为一个对象，它对于 Node.js 应用程序始终是可用的，故无需使用 require()；

2、process（进程）其实就是存在nodejs中的一个全局变量。然后呢，咱们可以通过这个所谓的进程能拿到一些有意思的东西。

3、process.env.NODE_ENV是通过webpack 内置的DefinePlugin为所有的依赖定义的变量

请看我们的vue项目中webpack.dev.conf.js文件

webpack.dev.conf.js

引用到的config/dev.env中的内容如下图：

dev.env.js

同理，我们vue项目中webpack.prod.conf.js文件也是一样，最终设置了'process.env.NODE_ENV':'production'。

这样，在运行脚本编译项目的时候，会根据变量值的不同，设置不同的baseUrl。那么为什么在开发环境'process.env.NODE_ENV'的值就是development即开发环境为什么用的就是webpack.dev.conf.js呢？看一下我们运行项目时的输出就知道了：

运行项目cmd