vue中 .env .env.development .env.production 详细说明

「爱情、让人受尽委屈。」 2024-03-24 00:04 36阅读 0赞

1.配置文件有：

> .env 全局默认配置文件，不论什么环境都会加载合并  
> .env.development 开发环境下的配置文件  
> .env.production 生产环境下的配置文件

2.命名规则：

> 属性名必须以VUE\_APP\_开头，比如VUE\_APP\_XXX

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNTc3Mzc1MQ_size_16_color_FFFFFF_t_70]

3.关于文件的加载：

根据启动命令vue会自动加载对应的环境，vue是根据文件名进行加载

比如执行npm run serve命令，会自动加载.env.development文件

注意：.env文件无论是开发还是生成都会加载

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNTc3Mzc1MQ_size_16_color_FFFFFF_t_70 1]

如上图所示，如过我们运行npm run serve 在就先加载.env文件，之后加载.env.development文件，两个文件有同一个项，则后加载的文件就会覆盖掉第一个文件，即.env.development文件覆盖掉了.env文件的NOOE\_ENV选项。

同理如果npm run build 就执行了.env和.env.production。

4.使用  
（1）在vue文件中使用  
![在这里插入图片描述][20200512100512926.png]  
注意：配置文件在vue模板文件的data之后加载

（2）在js文件中使用  
![在这里插入图片描述][2020051210083292.png]  
备注：js文件中可以添加JSON.stringify(xxxxxx)，解析成字符，但是vue中不能。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNTc3Mzc1MQ_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/d2c69782d42d46279e9ae5acdc8b0427.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNTc3Mzc1MQ_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/2ae596cbf79e4975be5f2af7c0cffe11.png
[20200512100512926.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/1b1f3001e344400f95dfb1bdccdf51ac.png
[2020051210083292.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/63fe3eff52e446518db92612b5e13507.png