2026年了不会还有人觉得Vite插件开发很难吧今天就用一个实战案例让你彻底掌握它开篇为什么2026年你还需要学Vite插件说实话2026年的前端生态已经相当成熟各种轮子应有尽有。但正是这样的环境下能解决特定场景痛点的定制化插件才更能体现一个开发者的工程化能力。之前项目上遇到个老生常谈的问题线上出bug了是哪个代码版本测试环境明明修复了生产怎么还有问题构建时间是多少缓存要不要刷新手动查Git太low了。写个脚本不够优雅。于是我花10分钟写了个Vite插件发布到了 npm仓库搜索 vite-plugin-unified-version从此版本信息自动注入构建产物一劳永逸。今天就手把手带你写出来保证看完就会会了就能用一、Vite插件到底是啥3句话说明白本质就是一个普通的JavaScript对象灵魂对象里的各种钩子函数Hooks作用在Vite构建的不同阶段「搞事情」就像你在煮泡面时构建过程可以烧水前决定用什么锅config钩子煮面时加点调料transform钩子煮完了关火盛出来closeBundle钩子就这么简单二、实战5分钟开发一个版本管理插件Step 1搭个架子// vite-plugin-version.js export default function versionPlugin(options {}) { return { name: vite-plugin-version, // 插件名必须唯一 // 钩子函数往这里加 } }这就完事了对一个合法的Vite插件就这么简单Step 2获取版本信息我们要拿到Git commit ID和构建时间import { execSync } from child_process; export default function versionPlugin(options {}) { // 获取Git commit ID let commitId unknown; try { commitId execSync(git rev-parse --short HEAD).toString().trim(); } catch { console.log(⚠️ 不是Git仓库使用unknown版本); } // 记录构建时间 const buildTime new Date().toLocaleString(zh-CN); return { name: vite-plugin-version, // 钩子函数... } }知识点execSync可以执行系统命令但别忘了try-catch不是所有项目都用GitStep 3注入到HTML这是最核心的部分用transformIndexHtml 钩子transformIndexHtml(html) { // 要注入的内容 const injectContent !-- 版本信息-自动注入 -- meta nameapp_version content${commitId} / meta nameapp_build_time content${buildTime} / script window.app_version ${commitId}; window.app_build_time ${buildTime}; /script ; // 插入到/head前面 return html.replace(/head, injectContent \n/head); }核心技巧字符串替换是最简单可靠的注入方式不用怕出错Step 4添加编译时常量想在Vue/React组件里直接用用config钩子config() { return { define: { __APP_VERSION__: JSON.stringify(commitId), __BUILD_TIME__: JSON.stringify(buildTime) } }; }然后在组件里script setup console.log(当前版本, __APP_VERSION__) console.log(构建时间, __BUILD_TIME__) /scriptStep 5友好的控制台提示用closeBundle在构建完成后给点反馈closeBundle() { console.log( ✅ 版本注入成功 版本号${commitId} 构建时间${buildTime} 访问方式window.app_version 或 __APP_VERSION__ ); }三、完整代码拿去就能用把上面拼起来再加点配置选项import { execSync } from child_process; export default function versionPlugin(options {}) { // 可配置的键名 const VERSION_KEY options.versionKey || app_version; const TIME_KEY options.timeKey || app_build_time; const INJECT_META options.injectMeta ! false; // 获取版本信息 let commitId unknown; let buildTime new Date().toLocaleString(zh-CN); try { commitId execSync(git rev-parse --short HEAD).toString().trim(); } catch {} return { name: vite-plugin-version, // 注入编译时常量 config() { return { define: { [__${VERSION_KEY.toUpperCase()}__]: JSON.stringify(commitId), [__${TIME_KEY.toUpperCase()}__]: JSON.stringify(buildTime) } }; }, // 注入HTML transformIndexHtml(html) { let injectContent ; if (INJECT_META) { injectContent meta name${VERSION_KEY} content${commitId} / meta name${TIME_KEY} content${buildTime} /; } injectContent script window.${VERSION_KEY} ${commitId}; window.${TIME_KEY} ${buildTime}; /script; return html.replace(/head, injectContent \n/head); }, // 构建完成提示 closeBundle() { console.log(\n✅ [版本插件] 构建成功 v-${commitId}); } }; }四、如何使用// vite.config.js import versionPlugin from ./vite-plugin-version; export default { plugins: [ versionPlugin({ versionKey: my_app_version, // 自定义版本key injectMeta: true // 是否注入meta标签 }) ] }运行npm run build你的HTML就会自动带上版本信息head meta namemy_app_version contenta3b9c2d / meta nameapp_build_time content2026/3/15 14:30:22 / script window.my_app_version a3b9c2d; window.app_build_time 2026/3/15 14:30:22; /script /head五、还能怎么玩学会了基础你可以注入更多信息分支名、构建环境、打包时间生成版本文件用generateBundle钩子输出version.json版本对比开发环境提醒版本更新自动标签构建成功自动打Git tag// 扩展生成version.json generateBundle() { this.emitFile({ type: asset, fileName: version.json, source: JSON.stringify({ version: commitId, buildTime: buildTime, env: process.env.NODE_ENV }) }); }六、总结学Vite插件值不值值而且很值学习成本低一个对象几个钩子函数应用场景广任何自动化需求都能用插件解决提升工程化能力从「用工具」到「造工具」的跨越记住核心三要素name插件身份证钩子函数在正确的时间做正确的事配置选项让插件灵活