【Vite】环境变量详解

Vite 是现代前端开发中的一个高性能构建工具，旨在为开发者提供快速的构建体验。本文将详细介绍 Vite 中的环境变量及其使用方法。通过对环境变量的合理运用，开发者可以根据不同的运行环境来动态配置应用行为，从而提升开发效率和代码的可维护性。

一、环境变量概述

1. 环境变量的定义

环境变量是一种用于在不同的环境（如开发、测试、生产等）中配置应用行为的机制。它们通常存储在外部文件中，并在应用运行时加载。通过使用环境变量，开发者可以避免将敏感信息或环境依赖硬编码到代码中。

在前端开发中，环境变量主要用于配置 API 地址、调试模式、数据库连接等。Vite 作为构建工具，提供了对环境变量的良好支持，使得在不同环境下轻松切换配置成为可能。

2. Vite 环境变量的特性

Vite 的环境变量有几个特点：

• 以 .env 文件形式存储：Vite 支持使用 .env 文件来定义环境变量，这些文件位于项目的根目录下。
• 不同环境的配置：Vite 支持根据不同的环境定义不同的 .env 文件，如 .env.development、.env.production 等。
• 以 VITE_ 前缀为标准：为了避免意外暴露敏感信息，Vite 强制要求自定义的环境变量必须以 VITE_ 开头。

二、Vite 中的环境变量文件

1. 文件命名规则

Vite 默认会根据项目根目录下的 .env 文件来加载环境变量。以下是几种常见的环境变量文件：

• .env：应用在所有环境中都通用的环境变量。
• .env.development：仅在开发环境中使用的环境变量。
• .env.production：仅在生产环境中使用的环境变量。

Vite 会根据当前运行的模式（mode）自动加载对应的 .env 文件。例如，在开发模式下会优先加载 .env.development，在生产模式下则加载 .env.production。

2. 文件内容格式

在 .env 文件中，每个环境变量以 KEY=VALUE 的形式定义：

VITE_APP_TITLE=我的Vite应用
VITE_API_URL=https://api.example.com

在这个例子中，定义了两个环境变量：VITE_APP_TITLE 表示应用的标题，VITE_API_URL 表示 API 的基础 URL。

3. 环境变量的作用范围

Vite 的环境变量可以作用于：

• 客户端代码：自定义的环境变量（必须以 VITE_ 开头）可以在客户端代码中通过 import.meta.env 进行访问。
• 构建时行为：某些环境变量（如 VITE_APP_TITLE）可以在构建时影响应用的行为，例如动态设置应用的标题。

三、Vite 环境变量的使用方法

1. 访问环境变量

在 Vite 项目中，访问环境变量非常简单。可以通过 import.meta.env 来访问定义的环境变量。需要注意的是，只有以 VITE_ 开头的变量才能在客户端代码中访问，其他变量则仅在构建过程中有效。

console.log(import.meta.env.VITE_APP_TITLE); // 输出 "我的Vite应用"
console.log(import.meta.env.VITE_API_URL);   // 输出 "https://api.example.com"

通过 import.meta.env，可以轻松获取在 .env 文件中定义的变量，并在代码中使用它们。

2. 区分不同环境的变量

通过定义多个 .env 文件，可以为不同的环境配置不同的变量。例如，可以在 .env.development 中设置开发环境的 API 地址，在 .env.production 中设置生产环境的 API 地址：

# .env.development
VITE_API_URL=http://localhost:3000

# .env.production
VITE_API_URL=https://api.example.com

这样，当在开发模式下运行时，VITE_API_URL 将指向本地的开发服务器，而在生产环境中将指向线上 API。

3. 动态配置应用

使用环境变量的一个典型场景是根据当前环境动态配置应用的行为。例如，可以根据 NODE_ENV 或自定义的 VITE_ 前缀变量来调整应用中的 API 调用或调试模式：

const apiUrl = import.meta.env.VITE_API_URL;

fetch(`${apiUrl}/users`)
  .then(response => response.json())
  .then(data => console.log(data));

在这个例子中，应用根据不同的环境动态选择 API 的地址，从而避免了在代码中硬编码 URL 的情况。

四、常用的 Vite 环境变量

除了自定义的环境变量外，Vite 还内置了一些常用的环境变量，帮助开发者更好地控制构建行为：

1. import.meta.env.MODE

import.meta.env.MODE 表示当前的构建模式，通常为 development 或 production。可以根据这个变量来判断应用当前运行在哪种模式下，并做相应的处理。

if (import.meta.env.MODE === 'development') {
  console.log('当前是开发模式');
}

2. import.meta.env.BASE_URL

import.meta.env.BASE_URL 表示项目的基础路径。通常用于配置静态资源的加载路径，尤其是在将应用部署到子路径时非常有用。

console.log(import.meta.env.BASE_URL); // 输出 "/"

3. import.meta.env.PROD 和 import.meta.env.DEV

import.meta.env.PROD 和 import.meta.env.DEV 分别表示当前是否处于生产模式或开发模式，返回布尔值。可以使用这两个变量来简化代码中的环境判断：

if (import.meta.env.PROD) {
  console.log('生产模式');
}

if (import.meta.env.DEV) {
  console.log('开发模式');
}

五、环境变量的最佳实践

1. 避免暴露敏感信息

虽然环境变量提供了方便的配置方式，但应避免在前端项目中暴露敏感信息，例如 API 密钥或数据库密码。由于前端代码是公开的，任何在 .env 文件中定义的以 VITE_ 开头的变量都可以被访问。因此，敏感信息应放在服务器端，而非客户端。

2. 使用 dotenv 加载变量

在某些复杂项目中，可能会有多个 .env 文件或需要对环境变量进行处理。可以借助 dotenv 这样的库在构建过程中加载并管理环境变量。

3. 保持变量的一致性

在项目中使用环境变量时，建议保持变量名的一致性，并对每个环境的变量文件进行文档说明。这样可以避免由于变量命名不统一而导致的问题。

六、总结

Vite 提供的环境变量机制为开发者提供了强大的配置能力，使得在不同的运行环境中能够灵活地控制应用的行为。通过合理使用环境变量，可以简化代码、提高可维护性，并确保应用能够适应多种运行场景。希望本文能够帮助你更好地理解 Vite 中的环境变量，并在实际项目中充分利用它们，为你的应用开发带来便利。

推荐：

• JavaScript
• react
• vue

---