让你秒懂 Vue .env .env.development .env.production
项目根目录下创建.env、.env.development和.env.production三个文件,各文件解释如下: .env 无论开发环境还是生产环境都会加载的配置文件 .env.development 开发环境加载的配置文件 .env.production 生产环境加载的配置文件环境变量的简单使用示例。需要注意,配置文件里的属性名必须以VUE_APP_开头,比如在.env文件这样声明一个
-
项目根目录下创建
.env
、.env.development
和.env.production
三个文件,文件名解释分别如下:
.env
无论开发环境还是生产环境都会加载的配置文件
.env.development
开发环境加载的配置文件
.env.production
生产环境加载的配置文件 -
环境变量的简单使用示例。需要注意,配置文件里的属性名必须以
VUE_APP_
开头,比如在.env
文件这样声明一个环境变量:VUE_APP_QQQ = `QQ`
然后就可以在代码里这样用了:
console.log(process.env.VUE_APP_QQQ) // -> `QQ`
-
那为什么是三个文件呢?
比如现在三个文件里内容分别如下:// .env VUE_APP_QQQ = `QQ`
// .env.development VUE_APP_QQQ = `WW`
// .env.production VUE_APP_QQQ = `RR`
那么首先,
Vue
在启动时,无论是在开发环境还是在生产环境,它始终都会加载.env
文件里的内容,然后(划重点)=>根据Node环境变量'NODE_ENV'的值来选择加载'development'还是'production'
。比如我们平常通过
npm run serve
启动时,我们本地系统的环境变量NODE_ENV
值默认是development
,这时就会先后加载.env
和.env.development
这两个文件。而当我们打包到服务器后,服务器的
NODE_ENV
值一般为production
,则此时Vue仍会先加载.env
文件,然后加载.env.production
文件。其次,在按顺序加载文件时,
Vue
会把后一个加载的文件内容和前面加载的文件内容进行比较,如果存在变量名相同,那么它会采用后一个文件里的变量值为变量的最终值
。拿上面三个文件内容打个比方:我们在日常开发时,
NODE_ENV
值是development
,那么Vue
就会首先加载.env
文件里的内容,然后继续加载.env.development
文件里的内容。那么我们发现变量名VUE_APP_QQQ
存在多个,这时Vue
就会采用后一个文件里的变量值为变量的最终值。因此我们通过console
输出看一看。console.log(VUE_APP_QQQ) // -> `WW`
看完秒懂的记得点个赞,你的支持是我创作的动力。
关注我,你会多一个宝藏。
更多推荐
所有评论(0)