登录都2026年了还不会Vite插件开发？手写一个版本管理插件，5分钟包会！
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，不是所有项目都用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';
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 name="my_app_version" content="a3b9c2d" />
<meta name="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.json
generateBundle() {
this.emitFile({
type: 'asset',
fileName: 'version.json',
source: JSON.stringify({
version: commitId,
buildTime: buildTime,
env: process.env.NODE_ENV
})
});
}
六、总结：学Vite插件值不值？
值！而且很值！
- 学习成本低：一个对象+几个钩子函数
- 应用场景广：任何自动化需求都能用插件解决
- 提升工程化能力：从「用工具」到「造工具」的跨越
记住核心三要素：
- name：插件身份证
- 钩子函数：在正确的时间做正确的事
- 配置选项：让插件更灵活
最后留个作业：给这个插件加个功能，打包时如果版本号没变就警告，防止忘记更新版本。评论区等你答案！
关注我的公众号 大前端历险记 获取更多前端姿势！
