详解.env文件配置---全局环境变量

最新推荐文章于 2025-02-12 14:41:38 发布

原创最新推荐文章于 2025-02-12 14:41:38 发布 · 1.9w 阅读

47 ·

CC 4.0 BY-SA版权

文章标签：

#vue #.env #环境变量 #react.js

vue 同时被 2 个专栏收录

11 篇文章

订阅专栏

react.js

5 篇文章

订阅专栏

本文详细介绍了.env文件在Vue项目中的作用，包括.env.development和.env.production文件的用途，以及如何设置和使用环境变量如VUE_APP_BASE_API。NODE_ENV变量决定了应用的运行模式，影响webpack配置。通过process.env访问环境变量，development模式用于vue-cli-service serve，production模式用于vue-cli-service build。了解这些配置有助于管理和优化开发与生产环境的差异。

一、 .env 文件说明

.env --- 全局默认配置文件，在所有的环境中被载入，当你指定了环境，它也会合并,并且优先级大于.env，没有指定环境时先找它
.env.development --- 指定开发环境的配置文件
.env.production --- 指定生产环境的配置文件，当 build 运行会触发此文件

二、变量创建

键值对形式创建，命名必须VUE_APP_开头
列如：VUE_APP_BASE_API = '/api'

.env.production
NODE_ENV='production'
VUE_APP_BASEURL='https://127.0.0.1:3000/api'
.env.development
NODE_ENV='development'
VUE_APP_BASEURL='https://127.0.0.1:3000/api'
NODE_ENV 将决定您的应用运行的模式，是开发，生产还是测试，因此也决定了创建哪种 webpack 配置，如果文件内部不包含 NODE_ENV 变量，它的值将取决于模式，例如，在 production 模式下被设置为 "production"，在 test 模式下被设置为 "test"，默认则是 "development"。

注意：如果在环境中有默认的 NODE_ENV，你应该移除它或在运行 vue-cli-service 命令的时候明确地设置 NODE_ENV

三、使用

可以使用 process.env.xxx 来访问属性
console.log('当前:',process.env.VUE_APP_BASEURL);

四、模式

拿VUE举例

development 模式用于 vue-cli-service serve
production 模式用于 vue-cli-service build

详情可见：模式和环境变量 | Vue CLI