Vite 环境变量与全局变量详解
目录
一、什么是环境变量？
二、Vite 的环境变量机制
1. .env 文件
2. 定义环境变量
3. 使用环境变量
4. 内置环境变量
三、Vite 中的全局变量
1. 使用 define 配置
2. 使用 TypeScript 声明
四、环境变量 vs 全局变量
五、常见问题与坑点
1. 为什么必须加 VITE_ 前缀？
2. 修改 .env 文件后不生效？
3. 在 JS 文件之外（如 HTML）怎么用？
六、最佳实践
七、总结
Vite 环境变量与全局变量详解
在前端开发中，环境变量与全局变量的使用非常普遍。
例如：接口的请求地址、不同环境（开发/测试/生产）的配置、应用级的常量等等。
如果你使用 Vite 搭建项目，就会发现它对环境变量的处理方式和以往的 Webpack 有一些不同。
本文将带你全面了解 Vite 中的环境变量与全局变量，并结合实际案例讲解如何正确使用。
一、什么是环境变量？
环境变量（Environment Variables），顾名思义就是根据不同的运行环境，来提供不同的配置。
常见场景：
-
开发环境（development）：调试本地接口，输出调试日志。
-
测试环境（test）：连接测试服务器。
-
生产环境（production）：关闭调试日志，使用正式接口。
这样可以避免在项目中硬编码，提升可维护性。
二、Vite 的环境变量机制
1. .env 文件
Vite 默认支持使用 .env 文件来定义环境变量。
常见的文件有：
-
.env—— 所有环境都会加载。 -
.env.development—— 开发环境加载。 -
.env.production—— 生产环境加载。 -
.env.test—— 测试环境加载。
2. 定义环境变量
在 .env 文件中书写时，必须以 VITE_ 前缀开头，才会暴露给前端代码使用。
例如：
# .env.development
VITE_APP_TITLE=我的开发环境
VITE_API_BASE=http://localhost:3000/api
# .env.production
VITE_APP_TITLE=生产环境应用
VITE_API_BASE=https://api.example.com
3. 使用环境变量
在代码中可以通过 import.meta.env 访问环境变量：
console.log(import.meta.env.VITE_APP_TITLE) // 我的开发环境 / 生产环境应用
console.log(import.meta.env.VITE_API_BASE) // 不同环境的接口地址
4. 内置环境变量
Vite 内置了一些环境变量：
-
import.meta.env.MODE—— 当前环境模式（development / production）。 -
import.meta.env.BASE_URL—— 部署应用时的基础路径。 -
import.meta.env.PROD—— 是否为生产环境。 -
import.meta.env.DEV—— 是否为开发环境。
三、Vite 中的全局变量
有时候我们需要在项目中定义一些 全局常量，例如：应用版本号、主题配置、常量枚举等。
在 Vite 中有两种方式：
1. 使用 define 配置
在 vite.config.ts 中：
import { defineConfig } from 'vite'export default defineConfig({define: {__APP_VERSION__: JSON.stringify('1.0.0'),__BUILD_TIME__: JSON.stringify(new Date().toISOString())}
})
在代码中使用：
console.log(__APP_VERSION__) // 1.0.0
console.log(__BUILD_TIME__) // 构建时间
这种方式非常适合在编译阶段注入常量。
2. 使用 TypeScript 声明
为了避免 TS 报错，可以在 env.d.ts 中声明：
declare const __APP_VERSION__: string
declare const __BUILD_TIME__: string
四、环境变量 vs 全局变量
| 对比点 | 环境变量（.env） | 全局变量（define） |
|---|---|---|
| 定义方式 | .env 文件 | vite.config.ts 中 define |
| 使用场景 | 接口地址、环境配置 | 编译时常量、版本号、开关 |
| 作用范围 | 根据运行环境变化 | 所有环境都一样（除非在配置里写条件逻辑） |
| 读取方式 | import.meta.env | 直接访问定义的变量 |
五、常见问题与坑点
1. 为什么必须加 VITE_ 前缀？
这是 Vite 的安全机制。
防止不小心把敏感信息（比如数据库密码）暴露到前端。
2. 修改 .env 文件后不生效？
修改后需要 重新启动开发服务器，否则不会加载新的环境变量。
3. 在 JS 文件之外（如 HTML）怎么用？
可以通过 import.meta.env.BASE_URL 等变量结合 Vite 插值语法使用：
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
六、最佳实践
-
统一管理环境变量：建议创建
src/config/index.ts文件，把常用变量统一导出。export const API_BASE = import.meta.env.VITE_API_BASE export const APP_TITLE = import.meta.env.VITE_APP_TITLE -
避免硬编码：接口、版本号、开关等尽量写在
.env或define中，方便维护。 -
环境隔离：开发、测试、生产环境尽量分开配置，避免发布时连接错误的接口。
七、总结
-
环境变量：通过
.env文件定义，使用import.meta.env读取，适合不同环境下的配置。 -
全局变量：通过 Vite 的
define配置注入，适合编译时的全局常量。 -
两者结合使用，可以让项目更加灵活、易维护。
掌握了这套方法，在实际开发中就能游刃有余地管理不同环境与全局配置啦 。