Vite全局常量定义方法

Wed, 05 Mar 2025 10:37:25 +0000

考察点分析

本题主要考核候选人对前端工程化工具链的掌握程度，具体评估以下维度：

编译时替换机制：理解Vite的define配置本质是编译期的字符串替换
环境变量处理：区分import.meta.env与编译常量的使用场景
类型安全：处理全局常量时的TypeScript支持方案
安全实践：避免XSS攻击的JSON.stringify正确用法
多环境适配：不同编译模式下常量值的动态配置

技术解析

关键知识点

Vite的define配置 > 环境变量 > 类型声明文件
编译时替换与运行时注入的本质区别
字符串替换的安全处理方式

原理剖析

Vite的define配置通过esbuild的define功能实现编译时替换。在代码压缩阶段，所有匹配的标识符会被直接替换为指定的JSON值。例如配置define: { __VERSION__: '"1.0.0"' }，代码中的__VERSION__会被替换为字符串"1.0.0"。

常见误区：

直接赋值非JSON序列化值（如__VERSION__: 1.0.0）导致替换后出现未定义标识符
混淆import.meta.env（环境变量）与编译时常量的使用场景
未声明TypeScript类型导致类型检查报错

问题解答

在Vite中通过define配置项注入全局常量：

 // vite.config.js
export default defineConfig({
 define: {
 __VERSION__: JSON.stringify('1.0.0'), // 正确序列化字符串
 'import.meta.env.APP_MODE': JSON.stringify(process.env.NODE_ENV)
 }
})

该配置会在编译阶段将代码中的__VERSION__直接替换为"1.0.0"，同时确保字符串类型的正确性。对于TypeScript项目，需添加类型声明：

 // global.d.ts
declare const __VERSION__: string;

解决方案

编码示例

 // 安全注入含敏感信息的常量
const pkg = require('./package.json')

export default defineConfig({
 define: {
 __APP_VERSION__: JSON.stringify(pkg.version), // 动态读取版本号
 __BUILD_TIMESTAMP__: Date.now().toString(), // 编译时间戳
 __FEATURE_FLAGS__: JSON.stringify({
 experimental: process.env.DEBUG === 'true'
 })
 }
})

优化建议：

全局变量 on ZiYang FrontEnd Interview

Vite全局常量定义方法

考察点分析 link

技术解析 link

关键知识点 link

原理剖析 link

问题解答 link

解决方案 link