在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
,也可以配置其他变量.