【前端配置篇】vue项目之.env系列文件配置详解:.env文件配置全局环境变量

331 阅读1分钟

.env:全局默认配置文件,无论什么环境都会加载合并。

.env.development:开发环境的配置文件

.env.production:生产环境的配置文件

image.png

注意:三个文件的文件名必须按上面方式命名,不能乱起名,否则读取不到文件。

image.png

vue 会根据启动命令自动加载相对应的环境配置文件。vue是根据文件名进行加载的,所以上面说“不要乱起名,也无需专门控制加载哪个文件”

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

开发环境加载 .env.env.development

生成环境加载 .env.env.production

运行npm run serve的时候主要还是看package.jsonserver属性的--mode后面跟的是啥。如果是development,就会加载.env.development文件。

package.json里面配置好,执行serve的时候用开发环境的。build打包用生产或者测试的

形式二选一: image.png

.env.development的文件。在地址上面一行加一个NODE_ENV=development

环境配置文件 > 全局配置文件

当全局的配置文件和环境的配置文件有相同配置项时,环境的配置项会覆盖全局的配置项

如:

开发环境

image.png

打印 process.env 属性(全局属性,任何地方均可使用):

项目中的使用

在配置文件中定义的属性在其它文件中如何访问呢??

可以使用 process.env.xxx 来访问属性。

image.png

image.png