目录
一、什么是环境变量？
二、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配置注入，适合编译时的全局常量。 -
两者结合使用，可以让项目更加灵活、易维护。
掌握了这套方法，在实际开发中就能游刃有余地管理不同环境与全局配置啦 。
