JavaScript 中怎么在 Vite 中使用全局常量定义注入构建配置-js教程-PHP中文网

vite 中 define 选项用于构建时静态替换全局常量，支持 string/number/boolean/null 及嵌套 json 数据，需在 env.d.ts 声明类型，适用于版本号、环境标识等不可变常量，区别于运行时的 import.meta.env。

javascript 中怎么在 vite 中使用全局常量定义注入构建配置

在 Vite 中，可以通过 vite.config.ts 的 define 选项注入全局常量，这些常量会在构建时被静态替换，运行时可直接访问，适用于环境标识、API 地址、版本号等。

使用 define 注入字符串/布尔/数字常量

define 接收一个对象，键为全局变量名（推荐用全大写加前缀避免冲突），值会被 JSON 序列化后直接替换到代码中。注意：它不是运行时变量，而是编译期文本替换。

值必须是 JSON 可序列化的（string、number、boolean、null，或嵌套对象/数组）
不能是函数、正则、undefined 或 Symbol
建议用 __APP_XXX__ 或 import.meta.env.XXX 风格命名，提高可读性和 IDE 识别度

示例（vite.config.ts）：

export default defineConfig({
  define: {
    __APP_VERSION__: JSON.stringify('1.2.0'),
    __IS_PRODUCTION__: process.env.NODE_ENV === 'production',
    __API_BASE_URL__: JSON.stringify('https://api.example.com'),
  },
})

在组件或任意 .ts/.js 文件中即可直接使用：

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

console.log(__APP_VERSION__); // "1.2.0"
console.log(__IS_PRODUCTION__); // true / false
fetch(__API_BASE_URL__ + '/users');

配合环境变量实现多环境注入

Vite 原生支持 .env 文件，但 import.meta.env 是运行时注入的 proxy 对象；而 define 是构建时硬编码，更轻量、不可篡改。两者可结合使用：

在 .env.development 中写：VITE_API_BASE=https://dev.api.com
在配置中读取并注入：__API_BASE_URL__: JSON.stringify(process.env.VITE_API_BASE)
注意：VITE_ 开头的变量才会被 Vite 自动暴露给 import.meta.env，但 define 可读取任意 Node 环境变量（包括非 VITE_ 前缀）

类型提示支持（TypeScript）

为避免 TS 报错“Cannot find name 'XXX'”，需在 env.d.ts 中声明全局变量：

// src/env.d.ts
declare const __APP_VERSION__: string;
declare const __IS_PRODUCTION__: boolean;
declare const __API_BASE_URL__: string;

若项目启用了 skipLibCheck: false 或严格类型检查，这一步必不可少。

与 import.meta.env 的区别和选择建议

import.meta.env 是 Vite 提供的运行时环境对象，值来自 .env 文件且可被覆盖（如通过命令行 --mode staging）；而 define 是纯静态替换，体积更小、执行更快、无法被运行时修改。

适合用 define：版本号、构建时间戳、是否启用某项实验特性（编译期决定）、CDN 域名等不随部署环境变化的常量
适合用 import.meta.env：API 地址、功能开关（需运行时动态控制）、用户可配置项
二者不互斥，可共存。例如：用 define 注入 __BUILD_TIME__，用 import.meta.env.VITE_API_URL 控制请求地址

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南