2026年的前端世界，感觉像是给了我们一堆Yi经包装好的神器。Vite 也不例外geng新频繁、插件生态层出不穷。你可Neng以为，Vite 插件开发是高深莫测的学问，但实际上，只要你敢动手，几分钟就Neng搞定一个实用的小插件。今天我就跟你聊聊怎么在5分钟内搞定一个版本信息注入插件，让你在项目里随时查kan build 时的 commit ID 和时间。

说实话，你现在打开一个新建的 Vite 项目，默认配置Yi经够用了。可Ru果你想让每次构建dou自动把当前 Git 的短哈希写进 HTML 或者全局变量，那就得自己动手或者去 npm 搜索。大多数人会直接写个小脚本放进 `vite.config.js`，但这不够灵活，也不容易复用。于是我决定把这段代码抽成一个真正的插件，然后发布到 npm 上，让其他项目也Neng直接 `import` 使用。

我记得第一次接触 Vite 的时候，心里那个激动：哇！Webpack 那些繁琐的配置dou被简化了！但当我kan到官方文档里那堆钩子名时还真有点犹豫：到底要怎么用？于是我只用了三行代码，把它变成了自己的工具箱。

下面这段代码，你Ke以直接拷贝到项目根目录的 `vite-plugin-version.js` 文件里：

import { execSync } from 'child_process';
export default function versionPlugin {
  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;
  try {
    commitId = execSync.toString.trim;
    // 若没有 git 仓库，这里会抛错
  } catch  {
    console.log;
    // 保持默认值
  }
  return {
    name: 'vite-plugin-version',
    config {
      return {
        define: {
          : JSON.stringify,
          : JSON.stringify
        }
      };
    },
    transformIndexHtml {
      let injectContent = '';
      if  {
        injectContent += ``;
        injectContent += ``;
      }
      injectContent += ``;
      return html.replace;
    },
    closeBundle {
      console.log;
    }
  };
}

哎呀，kan完这段代码，你是不是觉得好像还有点晕？别急，我慢慢拆开来解释。

`execSync` 就是同步执行命令行里的 Git 哈希提取命令。对大多数项目来说它Neng拿到当前 HEAD 的短哈希。Ru果你不是在 Git 仓库里跑，这个命令会报错，所以我们用 try/catch 把错误吞掉，然后留个默认值。

`config` 钩子返回一个对象，让 Vite 在编译阶段把你的常量注入到代码里。这样在 Vue/React/任何 JS 框架中，你douKe以直接 `console.log` 来查kan版本号。

`transformIndexHtml` 是Zui核心的钩子，它Ke以在生成Zui终的 index.html 前对其Zuo任何改造。我这里先插入两个 `` 标签，然后再往页面里塞一段脚本，把版本信息挂到 `window` 上。这么Zuo，你Ke以在浏览器控制台随时查找，也方便后期Zuo灰度发布或快速定位问题。

`closeBundle` 在整个打包结束后触发，用来给终端打印一条漂亮的提示信息：✅ 构建成功 v-abc1234。这条日志帮你快速判断构建是否正常，还Neng直观kan到当前 commit 哈希。

只需要把上面文件保存好，然后在 `vite.config.js` 装进去：

import versionPlugin from './vite-plugin-version';
export default defineConfig({
  plugins: 
});

然后运行 `npm run build` 或者 `pnpm build` 就好了。等一分钟后你会kan到终端输出：

✅  构建成功 v-abc1234
✨ 打包完成，总共耗时 XX 秒

打开生成的 dist/index.html，就Nengkan到类似这样的片段：

...

...

"害，我总是在测试前忘记关掉 dev server。" 那么打开浏览器控制台，键入：

console.log;
console.log;

马上就Nengkan到对应值，验证无误。当然Ru果你喜欢geng高级一点，Ke以把这些值渲染到页面上，让用户一眼就Nengkan见当前部署的是哪一次提交。

"那这样以后谁要改一下 key 名呢？" 别担心，只要改 `vite.config.js` 的 `versionKey` 和 `timeKey` 参数，再重启构建即可生效。因为所有引用dou靠动态挂载，所以不需要改组件里的硬编码字符串。

自定义注入位置： Ru果你的页面结构非常特殊，比如想把 meta 放到 ` ` 开头而不是 ``，只需改掉 `.replace` 那行逻辑即可。