vue中.env文件配置环境变量的实现

目录

• 1️⃣ 文件说明
• 2️⃣ 内容格式
• 3️⃣ 加载
• 4️⃣ 优先级
• 5️⃣ 项目中的使用

.env 文件配置

1️⃣ 文件说明

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

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

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

注意：三个文件的文件名必须按.env方式命名，不能乱起名，否则读取不到文件。

2️⃣ 内容格式

注意：属性名必须以 VUE_APP_ 开头，如：VUE_APP_XXX

3️⃣ 加载

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

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

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

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

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

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

package.json 配置项：

"scripts": {
    "serve": "vue-cli-service serve --mode development",
    "build": "vue-cli-service build",
    "build:sit": "vue-cli-service build --mode production.sit",
    "build:uat": "vue-cli-service build --mode production.uat",
    "build:prod": "vue-cli-service build --mode production",
    "lint": "vue-cli-service lint",
    "et": "node_modules/.bin/et",
    "et:init": "node_modules/.bin/et -i",
    "et:list": "gulp themes"
  }

4️⃣ 优先级

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

当全局的配置文件和环境的配置文件有相同配置项时，环境的配置项会覆盖全局的配置项（.env默认执行，后面执行的.env.developmemt的话有相同属性的会覆盖.env）

如：

开发环境

打印 process.env 属性（全局属性，任何地方均可使用）：

从上面图片中可知，.env 中的全局属性 VUE_APP_PREVIEW 与 VUE_APP_API_BASE_URL 被覆盖。
.env 中的全局属性 VUE_APP_AGE 被保留。

5️⃣ 项目中的使用

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

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

如：

 到此这篇关于vue中.env文件配置环境变量的实现的文章就介绍到这了,更多相关vue .env配置环境变量内容请搜索脚本之家以前的文章或继续浏览下面的相关文章