vue中的process.env.NODE_ENV

在node中，process.env表示当前系统的环境信息

process.env中并不存在NODE_ENV这个属性，这个是用户自定义的变量，在webpack中用来判断是生产环境和开发环境

在项目中通常是在webpack的DefinePlugin中配置这个属性

{
'process.env': {
   NODE_ENV: JSON.strangify(process.env.NODE_ENV)
}

然后在package.json的script配置中设置：NODE_ENV=development

这个时候运行npm run dev打包后，在系统中打印process.env.NODE_ENV即可看到结果

有时候由于windows不支持这样的设置方式会报错，因此产生了cross-env，这个方式可以兼容全开发平台

使用这个方式需要在项目中安装npm install --save-dev cross-env

然后在package.json中的script做如下设置:

{
  "dev": "cross-env NODE_ENV=development webpack-dev-server"
}

Vue-cli3.0是采用DefinePlugin的方式帮我们配置好了，直接运行项目就能打印出来结果

“模式”是vue cli中一个重要的概念，默认情况下vue cli有三个模式：developmemt production test; 一个模式下可以有多个环境变量

我们可以通过传递--mode 选项参数为命令行覆写默认的模式，然后通过为.env文件增加后缀来设置某个模式下特有的环境变量

比如： vue-cli-service build --mode development会在development模式下加载可能存在的.env .env.development .env.development.local文件来构建应用

如果在项目根目录创建.env.development文件，那么这个文件里声明过的变量就只会在development模式下被载入。

也就是说，在vue中，NODE_ENV可以通过.env文件或者.env.[mode]文件配置，当然除了NODE_ENV，也可以配置其他变量.