当前位置: 代码迷 >> 综合 >> 让你秒懂 Vue 【.env, .env.development, .env.production】
  详细解决方案

让你秒懂 Vue 【.env, .env.development, .env.production】

热度:43   发布时间:2023-11-26 16:49:02.0

1:  项目根目录下创建.env.env.development.env.production三个文件,文件名解释分别如下:
  .env 无论开发环境还是生产环境都会加载的配置文件
  .env.development 开发环境加载的配置文件
  .env.production 生产环境加载的配置文件

2:  环境变量的简单使用示例。需要注意,配置文件里的属性名必须以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`


原文链接:https://blog.csdn.net/qq_28827635/article/details/106271580?spm=1001.2014.3001.5501

  相关解决方案