从源代码剖析 Vue CLI 3.0 环境变量配置

2023-11-05 02:17:28

在开发 Vue.js 应用程序时，我们经常需要使用环境变量来管理配置和机密信息。在 Vue CLI 3.0 中，我们可以使用以 VUE_APP_ 为前缀的环境变量。但是，这些变量是如何配置的呢？让我们从源代码中一探究竟。

源码解析

首先，我们在根目录的 package.json 文件中可以看到，当执行 npm run serve 命令时，将会调用 vue-cli-service：

{
  "scripts": {
    "serve": "vue-cli-service serve"
  }
}

接下来，让我们深入研究 vue-cli-service 源代码。在 /lib/config/appConfig.js 文件中，我们可以找到处理环境变量配置的代码：

const dotenv = require('dotenv');
const path = require('path');

const appConfig = createAppConfig(userOptions);

// 加载 `.env` 文件
if (dotenvConfigPath) {
  dotenv.config({ path: dotenvConfigPath });
}

这段代码使用 dotenv 库从 .env 文件中加载环境变量。.env 文件通常包含敏感信息，例如 API 密钥或数据库凭据。

处理 `VUE_APP_` 环境变量

接下来，代码将处理以 VUE_APP_ 为前缀的环境变量：

// 处理 VUE_APP_ 环境变量
if (appConfig.vue = {} && appConfig.env && appConfig.env.VUE_APP) {
  for (const name in appConfig.env.VUE_APP) {
    if (appConfig.env.VUE_APP.hasOwnProperty(name)) {
      appConfig.vue[`VUE_APP_${name}`] = appConfig.env.VUE_APP[name];
    }
  }
}