返回

Vite 的环境变量和模式

前端

Vite 从入门到精通（四）：环境变量与模式

在软件开发过程中，我们经常需要根据不同的环境（例如开发环境、测试环境和生产环境）使用不同的配置。Vite 提供了一套强大的环境变量和模式系统，使我们能够轻松地管理和使用这些配置。

环境变量

内置环境变量

Vite 中提供了几个内置环境变量，可以在所有环境中使用：

  • import.meta.env.VITE_APP_TITLE：应用的标题
  • import.meta.env.VITE_APP_MODE：当前模式（例如 "development" 或 "production"）
  • import.meta.env.VITE_APP_BASE_URL：应用的基础 URL
  • import.meta.env.VITE_APP_API_URL：API 的 URL

自定义环境变量

除了内置环境变量之外，我们还可以定义自己的自定义环境变量。这可以通过 .env 文件来完成，该文件包含环境变量及其值的一对列表。例如：

VITE_APP_THEME=dark
VITE_APP_DEBUG=true

在 .env 文件中定义的环境变量可以通过 import.meta.env 对象访问。

模式

Vite 使用 "模式" 的概念来管理不同的构建配置。最常见的模式是 "development" 和 "production"，但我们也可以创建自己的自定义模式。

模式可以通过 --mode 命令行选项指定。例如，以下命令将使用 "production" 模式构建应用：

vite build --mode production

内置模式

Vite 提供了几个内置模式：

  • development ：用于开发
  • production ：用于生产
  • test ：用于测试

自定义模式

除了内置模式之外，我们还可以创建自己的自定义模式。这可以通过创建一个 .env 文件，其中包含模式名称及其值的列表来完成。例如：

MODE=staging

在 .env 文件中定义的模式可以通过 process.env.MODE 环境变量访问。

使用环境变量和模式

我们可以使用环境变量和模式来根据不同的环境配置我们的应用。例如，我们可以使用 import.meta.env.VITE_APP_MODE 环境变量来切换不同的构建配置，或者使用 process.env.MODE 环境变量来加载不同的配置文件。

构建不同的环境

我们可以使用 Vite 构建不同的环境。这可以通过以下步骤完成：

  1. 创建一个 .env 文件，其中包含每个环境的自定义环境变量和模式。
  2. 运行 vite build 命令，并使用 --mode 选项指定要构建的模式。
  3. Vite 将使用指定的模式和环境变量构建应用。

结束语

环境变量和模式是 Vite 中强大的功能，使我们能够轻松地管理和使用不同的构建配置。通过了解如何使用这些功能，我们可以根据不同的环境优化我们的应用，并使我们的开发过程更加高效。