都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 }) }); }