vue系列：使用.env文件配置全局环境变量

时间：2025-02-06 15:19:23

这个是基于 vue/cli 脚手架的。文档
挑重点说一说，其他的去看文档就行了

根目录中的下列文件来指定环境变量

.env                # 在所有的环境中被载入
.          # 在所有的环境中被载入，但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略

一个环境文件只包含环境变量的“键=值”对：

FOO=bar
VUE_APP_SECRET=secret

被载入的变量将会对 vue-cli-service 的所有命令、插件和依赖可用。

这几个模式什么情况会被调用

默认情况下，一个 Vue CLI 项目有三个模式：

development 模式用于 vue-cli-service serve
production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
test 模式用于 vue-cli-service test:unit

但是我们一般不这么做，因为我们可能不会将test作为单元测试模式，我们分三个环境，本地测试环境（develop），线上测试环境（test），线上正式环境（production）：

// .
NODE_ENV=development
BRANCH=development

VUE_APP_ENV=development


// .
NODE_ENV=production
BRANCH=test

VUE_APP_ENV=test


// .
NODE_ENV=production
BRANCH=master

VUE_APP_ENV=production


// 
{
  "scripts": {
    "serve": "vue-cli-service serve",
    "debug:test": "vue-cli-service serve --https",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint",
    // 这个其实加不加都行，因为默认build的模式就是production
    "build:master": "vue-cli-service build --mode production",
    // 我们这里改变了build:test的模式为test
    "build:test": "vue-cli-service build --mode test",
    "commit": "git add . && npx git-cz",
    "dev": "npm run serve",
    "dll": "webpack --config ./",
    "precommit": "lint-staged",
    "release": "standard-version"
  }
}

只有以 VUE_APP_ 开头的变量会被 静态嵌入到客户端侧的包中。
(.VUE_APP_SECRET)

注意

env 中的变量需要加上 VUE_APP_ 前缀。

相关文章