夜雨聆风
都2026年了还不会Vite插件开发?手写一个版本管理插件,5分钟包会!
2026年了，不会还有人觉得Vite插件开发很难吧？今天就用一个实战案例，让你彻底掌握它！
开篇：为什么2026年你还需要学Vite插件？
说实话，2026年的前端生态已经相当成熟，各种轮子应有尽有。但正是这样的环境下，能解决特定场景痛点的定制化插件，才更能体现一个开发者的工程化能力。
之前项目上遇到个老生常谈的问题：
-
线上出bug了，是哪个代码版本？ -
测试环境明明修复了，生产怎么还有问题？ -
构建时间是多少，缓存要不要刷新？
手动查Git？太low了。写个脚本？不够优雅。于是，我花10分钟写了个Vite插件发布到了npm仓库（npm仓库搜索 vite-plugin-unified-version），从此版本信息自动注入构建产物，一劳永逸。
今天就手把手带你写出来，保证看完就会，会了就能用！
一、Vite插件到底是啥？3句话说明白
-
本质：就是一个普通的JavaScript对象 -
灵魂：对象里的各种钩子函数（Hooks） -
作用：在Vite构建的不同阶段「搞事情」
就像你在煮泡面时（构建过程），可以：
-
烧水前决定用什么锅（config钩子） -
煮面时加点调料（transform钩子） -
煮完了关火盛出来（closeBundle钩子）
就这么简单！
二、实战：5分钟开发一个版本管理插件
Step 1：搭个架子
// vite-plugin-version.jsexportdefaultfunctionversionPlugin(options = {}) {return {name: 'vite-plugin-version', // 插件名，必须唯一// 钩子函数往这里加 }}这就完事了？对！一个合法的Vite插件就这么简单！
Step 2：获取版本信息
我们要拿到Git commit ID和构建时间：
import { execSync } from'child_process';exportdefaultfunctionversionPlugin(options = {}) {// 获取Git commit IDlet commitId = 'unknown';try { commitId = execSync('git rev-parse --short HEAD').toString().trim(); } catch {console.log('⚠️ 不是Git仓库，使用unknown版本'); }// 记录构建时间const buildTime = newDate().toLocaleString('zh-CN');return {name: 'vite-plugin-version',// 钩子函数... }}知识点：execSync可以执行系统命令，但别忘了try-catch，不是所有项目都用Git！
Step 3：注入到HTML
这是最核心的部分，用 transformIndexHtml 钩子：
transformIndexHtml(html) {// 要注入的内容const injectContent = ` <!-- 版本信息-自动注入 --> <meta name="app_version" content="${commitId}" /> <meta name="app_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__)</script>Step 5：友好的控制台提示
用 closeBundle 在构建完成后给点反馈：
closeBundle() {console.log(` ✅ 版本注入成功！ 版本号：${commitId} 构建时间：${buildTime} 访问方式：window.app_version 或 __APP_VERSION__ `);}三、完整代码：拿去就能用！
把上面拼起来，再加点配置选项：
import { execSync } from'child_process';exportdefaultfunctionversionPlugin(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 = newDate().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.jsimport versionPlugin from'./vite-plugin-version';exportdefault {plugins: [ versionPlugin({versionKey: 'my_app_version', // 自定义版本keyinjectMeta: true// 是否注入meta标签 }) ]}运行 npm run build，你的HTML就会自动带上版本信息：
<head><metaname="my_app_version"content="a3b9c2d" /><metaname="app_build_time"content="2026/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.jsongenerateBundle() {this.emitFile({type: 'asset',fileName: 'version.json',source: JSON.stringify({version: commitId,buildTime: buildTime,env: process.env.NODE_ENV }) });}六、总结：学Vite插件值不值？
值！而且很值！
-
学习成本低：一个对象+几个钩子函数 -
应用场景广：任何自动化需求都能用插件解决 -
提升工程化能力：从「用工具」到「造工具」的跨越
记住核心三要素：
-
name：插件身份证 -
钩子函数：在正确的时间做正确的事 -
配置选项：让插件更灵活
最后留个作业：给这个插件加个功能，打包时如果版本号没变就警告，防止忘记更新版本。评论区等你答案！
请在微信客户端打开
