首先查看一下process.env中都有哪些内容
- 安装node.js
- 通过终端(cmd),输入node,进入编辑模式
-
输入process+回车, 显示进程
-
输入process.env+回车,显示当前环境(environment)
-
输入process.env.NODE_ENV+回车,显示 'undefined'
说明process.env.NODE_ENV不是系统默认选项,是人为后续加入的一个自定义项 -
退出,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了