vite 中 define 配置项支持编译时静态替换环境变量,适合构建时确定的值(如 api 前缀);需用 json.stringify 包裹字符串,变量名建议双下划线前缀,typescript 需声明类型,不可运行时修改。

在 Vite 中,可以通过 define 配置项将环境变量“内联”到代码中,实现编译时静态替换。这种方式适合拼接 API 前缀这类在构建时就确定、运行时不变化的值。
1. 在 vite.config.ts 中配置 define
使用 define 将字符串变量注入全局,注意:它只接受 JSON 可序列化的值(字符串、布尔、数字、null、对象、数组),且会被直接替换,不是运行时读取。
例如,根据不同环境设置 API 基础地址:
export default defineConfig({
define: {
__API_BASE__: JSON.stringify(
process.env.NODE_ENV === 'production'
? 'https://api.example.com'
: 'http://localhost:3000'
),
},
})
⚠️ 关键点:
- 必须用 JSON.stringify 包裹字符串,否则生成的代码会缺少引号,导致语法错误;
- define 是编译时替换,无法在运行时修改;
- 变量名建议用双下划线开头(如 __API_BASE__)避免和用户代码冲突。
2. 在代码中直接使用 define 的变量
无需 import,直接当作全局常量使用(TypeScript 需要类型声明):
// api/index.ts
export const API_BASE = __API_BASE__
<p>export function request(url: string, options?: RequestInit) {
return fetch(API_BASE + url, options)
}</p>
构建后,__API_BASE__ 会被替换成实际字符串,例如:fetch("https://api.example.com/login", ...)
3. TypeScript 类型提示支持
为避免 TS 报错,在项目中添加类型声明(如 env.d.ts):
declare const __API_BASE__: string
放在 src/env.d.ts 或 vite-env.d.ts 中即可被识别。
4. 替代方案对比:define vs env variables
如果需要运行时切换(如用户手动切测试/正式环境),define 不适用 —— 它是静态的。此时推荐:
- 用
.env文件 +import.meta.env.VUE_APP_API_BASE(需以VUE_APP_或VITE_开头) - 但注意:
import.meta.env只能暴露以指定前缀开头的变量,且值始终是字符串 - 若只是构建时定死前缀,
define更轻量、无运行时开销、类型更可控
大量免费API接口:立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游,为数据API应用能力赋能!











