模式和环境变量 #

模式 #

模式 是 Vue CLI 项目中的一个重要概念。默认情况下，有三种模式

• development 由 vue-cli-service serve 使用
• test 由 vue-cli-service test:unit 使用
• production 由 vue-cli-service build 和 vue-cli-service test:e2e 使用

可以通过传递 --mode 选项标志来覆盖命令使用的默认模式。例如，如果你想在构建命令中使用开发变量

vue-cli-service build --mode development

运行 vue-cli-service 时，环境变量将从所有 对应文件 加载。如果它们不包含 NODE_ENV 变量，它将被相应地设置。例如，NODE_ENV 将在生产模式下设置为 "production"，在测试模式下设置为 "test"，否则默认为 "development"。

然后 NODE_ENV 将决定你的应用程序运行的主要模式 - 开发、生产或测试 - 以及随之创建的 webpack 配置类型。

例如，将 NODE_ENV 设置为 "test" 时，Vue CLI 会创建一个旨在用于单元测试并针对单元测试进行优化的 webpack 配置。它不会处理单元测试不需要的图像和其他资源。

类似地，NODE_ENV=development 会创建一个 webpack 配置，它启用 HMR，不会哈希资源或创建供应商包，以便在运行开发服务器时能够快速重新构建。

运行 vue-cli-service build 时，无论你部署到哪个环境，你的 NODE_ENV 始终应该设置为 "production"，以获得一个准备部署的应用程序。

环境变量 #

可以通过将以下文件放在项目根目录中来指定环境变量

.env                # loaded in all cases
.env.local          # loaded in all cases, ignored by git
.env.[mode]         # only loaded in specified mode
.env.[mode].local   # only loaded in specified mode, ignored by git

环境文件只包含环境变量的键值对

FOO=bar
VUE_APP_NOT_SECRET_CODE=some_value

请注意，只有 NODE_ENV、BASE_URL 以及以 VUE_APP_ 开头的变量将使用 webpack.DefinePlugin 静态嵌入到客户端包中。这样做是为了避免意外地在机器上暴露可能具有相同名称的私钥。

有关更详细的环境解析规则，请参考 dotenv 文档。我们还使用 dotenv-expand 进行变量扩展（在 Vue CLI 3.5+ 中可用）。例如

FOO=foo
BAR=bar

CONCAT=$FOO$BAR # CONCAT=foobar

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

示例：预发布模式 #

假设我们有一个应用程序，它具有以下 .env 文件

VUE_APP_TITLE=My App

以及以下 .env.staging 文件

NODE_ENV=production
VUE_APP_TITLE=My Staging App

• vue-cli-service build 会构建一个生产应用程序，如果存在，会加载 .env、.env.production 和 .env.production.local；

• vue-cli-service build --mode staging 会在预发布模式下构建一个生产应用程序，如果存在，会使用 .env、.env.staging 和 .env.staging.local。

在这两种情况下，应用程序都是作为生产应用程序构建的，因为 NODE_ENV，但在预发布版本中，process.env.VUE_APP_TITLE 被覆盖为不同的值。

在客户端代码中使用环境变量 #

可以在应用程序代码中访问环境变量

console.log(process.env.VUE_APP_NOT_SECRET_CODE)

在构建期间，process.env.VUE_APP_NOT_SECRET_CODE 将被相应的值替换。在 VUE_APP_NOT_SECRET_CODE=some_value 的情况下，它将被 "some_value" 替换。

除了 VUE_APP_* 变量之外，还有两个特殊变量始终在你的应用程序代码中可用

• NODE_ENV - 这将是 "development"、"production" 或 "test" 之一，具体取决于应用程序运行的 模式。
• BASE_URL - 这对应于 vue.config.js 中的 publicPath 选项，是应用程序部署的基路径。

所有解析的环境变量都将在 public/index.html 中可用，如 HTML - 插值 中所述。

process.env.VUE_APP_VERSION = require('./package.json').version

module.exports = {
  // config
}

仅限本地变量 #

有时你可能有一些环境变量不应该提交到代码库中，尤其是在你的项目托管在公共存储库中的情况下。在这种情况下，你应该使用 .env.local 文件。本地环境文件默认情况下在 .gitignore 中被忽略。

.local 也可以附加到特定模式的环境文件中，例如 .env.development.local 将在开发期间加载，并被 git 忽略。