Vite 中的环境变量使用详解

Vite 中的环境变量使用详解

前端开发中，环境变量的使用至关重要，尤其是在处理开发、测试和生产环境下的不同配置时。Vite对环境变量的使用有其独特的实现方式。下面重点介绍如何在 Vite 中使用环境变量，并简要介绍 Vite 与 Vue CLI 的关联与区别，最后介绍 Vue CLI 中环境变量的使用。

Vite 中的环境变量使用

在 Vite 中，环境变量通常通过 .env 文件来定义。根据环境的不同，可以使用以下几种类型的 .env 文件：

1. .env: 通用的环境变量文件，适用于所有环境。
2. .env.local: 通用的本地配置文件，通常不提交到版本控制系统中。
3. .env.development: 仅在开发环境中使用的环境变量文件。
4. .env.development.local: 开发环境的本地配置文件，通常用于定义开发环境下的私人配置。
5. .env.production: 仅在生产环境中使用的环境变量文件。
6. .env.production.local: 生产环境的本地配置文件，通常不提交到版本控制系统中。

这些文件可以根据不同的环境需求进行配置。Vite 在启动时会根据命令自动加载对应的 .env 文件。例如，当你使用 vite 启动开发服务器时，Vite 会自动加载 .env.development 和 .env.local，如果你使用 vite build 进行生产构建，Vite 则会加载 .env.production 和 .env.production.local。这些文件中的变量会自动合并并应用到当前环境中。

在 Vite 中，所有环境变量必须以 VITE_ 前缀开头。例如：

VITE_API_URL=https://api.example.com
VITE_APP_TITLE=My Vite App

这一前缀是强制性的，Vite 会自动过滤掉未以 VITE_ 开头的变量。这种设计确保了只有显式声明为应用级别的变量才会被注入到代码中，减少了敏感信息泄露的风险。

在代码中，可以通过 import.meta.env 对象来访问环境变量。例如：

console.log(import.meta.env.VITE_API_URL);

import.meta.env 是 Vite 提供的一个特殊对象，用于在代码中访问 .env 文件中定义的变量。Vite 在构建时会静态地将这些变量注入到代码中，因此变量值在最终的打包文件中是固定的，无法在运行时动态修改。

Vite 与 Vue CLI 的关联与区别

Vite 和 Vue CLI 都是 Vue.js 项目的构建工具，但它们在设计理念、性能和使用方式上有显著的区别。

关联

• Vue.js 项目支持: Vite 和 Vue CLI 都是为了支持 Vue.js 项目而设计的，提供了从开发到生产的完整构建流程。
• 插件生态: 虽然两者有不同的插件系统，但它们都支持 Vue.js 所需的基础设施，如支持 Vue 单文件组件（SFC）、热模块替换（HMR）、和环境变量管理。

区别

• 构建速度: Vite 利用现代浏览器的 ES 模块特性，在开发阶段无需打包，启动和热更新速度极快。Vue CLI 使用 Webpack 作为打包工具，尽管功能强大，但在大型项目中开发服务器启动和热更新速度较慢。
• 构建工具链: Vue CLI 主要基于 Webpack，功能全面且成熟，适合复杂项目。Vite 基于 Rollup，构建过程更简洁高效，更适合追求极致性能的项目。
• 环境变量的注入时机: 在 Vite 中，环境变量在构建时静态注入；在 Vue CLI 中，环境变量可以在运行时动态读取。

Vue CLI 中的环境变量使用

尽管本文重点介绍了 Vite 中环境变量的使用，了解 Vue CLI 中环境变量的用法也有助于理解两者的差异。

在 Vue CLI 中，环境变量文件的命名与 Vite 类似，同样支持以下几种文件：

1. .env: 通用的环境变量文件。
2. .env.local: 通用的本地配置文件。
3. .env.development: 开发环境的环境变量文件。
4. .env.development.local: 开发环境的本地配置文件。
5. .env.production: 生产环境的环境变量文件。
6. .env.production.local: 生产环境的本地配置文件。

Vue CLI 要求所有环境变量的命名必须以 VUE_APP_ 前缀开头。例如：

VUE_APP_API_URL=https://api.example.com
VUE_APP_TITLE=My Vue App

在 Vue CLI 中，环境变量可以通过 process.env 对象访问，例如：

console.log(process.env.VUE_APP_API_URL);

Vue CLI 支持通过 --mode 参数指定不同的构建模式，如 npm run build --mode production，并自动加载相应的 .env 文件。

参考链接

• Vite 官方文档
• Vue CLI 官方文档