process.env中变量的配置

首先查看一下process.env中都有哪些内容

1. 安装node.js
2. 通过终端（cmd），输入node，进入编辑模式
3. 输入process+回车, 显示进程
4. 输入process.env+回车，显示当前环境（environment）
5. 输入process.env.NODE_ENV+回车，显示 'undefined'
   说明process.env.NODE_ENV不是系统默认选项，是人为后续加入的一个自定义项
6. 退出，Ctrl+D或者.exit

process.env 是 Node.js 中的一个环境变量

process.env.NODE_ENV 这个变量主要用于标识当前的环境（生产环境，开发环境）；默认是没有这个环境变量的，需要自己手动配置

方法一：

1. 在package.json中，对scripts添加新指令

// windows
"scripts":{
	"dev" : "set NODE_ENV=development webpack",
	"build" : "set NODE_ENV=production webpack"
}

// unix
"scripts":{
	"dev" : "export NODE_ENV=development webpack",
	"build" : "export NODE_ENV=production webpack"
}

由于不同系统之间的命令不一样，为了解决这个兼容问题，借助第三方包cross-env

npm install cross-env –save-dev 或者 npm install cross-env -D

"-D" 和 "--save-dev" 都表示将这个包安装为开发依赖（devDependencies），用于开发、构建和测试等环境，不会包含在最终的生产环境中

"scripts":{
	"dev" : "cross-env NODE_ENV=development vue-cli-service serve",
	"build" : "cross-env NODE_ENV=production vue-cli-service build"
} 

2. 完成设置后，在vue.config.js中验证

let env = process.env.NODE_ENV;
console.log(env); 

3. 将process.env.NODE_ENV全局化

在vue.config.js中

const webpack = require('webpack');
module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.DefinePlugin({
        'process.env': {
            NODE_ENV: JSON.stringify(process.env.NODE_ENV),
        },
      })
    ]
  }
}

方法二：通过模式方式（以vue为例）

1. 在package.json中，对scripts添加新指令

"scripts": {    
    "dev": "vue-cli-service serve --mode dev",    
    "build": "vue-cli-service build --mode prod",     
}

2. 在根目录下创建文件

// .env.dev
NODE_ENV='development'

// .env.prod
NODE_ENV='production'

3. 在全局就可以使用process.env.NODE_NEV了