都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：搭个架子

javascript 复制代码

// vite-plugin-version.js
export default function versionPlugin(options = {}) {
  return {
    name: 'vite-plugin-version', // 插件名，必须唯一
    // 钩子函数往这里加
  }
}

这就完事了？对！一个合法的Vite插件就这么简单！

Step 2：获取版本信息

我们要拿到Git commit ID和构建时间：

javascript 复制代码

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 钩子：

javascript 复制代码

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 钩子：

javascript 复制代码

config() {
  return {
    define: {
      __APP_VERSION__: JSON.stringify(commitId),
      __BUILD_TIME__: JSON.stringify(buildTime)
    }
  };
}

然后在组件里：

vue 复制代码

<script setup>
console.log('当前版本：', __APP_VERSION__)
console.log('构建时间：', __BUILD_TIME__)
</script>

Step 5：友好的控制台提示

用 closeBundle 在构建完成后给点反馈：

javascript 复制代码

closeBundle() {
  console.log(`
    ✅ 版本注入成功！
    版本号：${commitId}
    构建时间：${buildTime}
    访问方式：window.app_version 或 __APP_VERSION__
  `);
}

三、完整代码：拿去就能用！

把上面拼起来，再加点配置选项：

javascript 复制代码

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

四、如何使用？

javascript 复制代码

// 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就会自动带上版本信息：

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

javascript 复制代码

// 扩展：生成version.json
generateBundle() {
  this.emitFile({
    type: 'asset',
    fileName: 'version.json',
    source: JSON.stringify({
      version: commitId,
      buildTime: buildTime,
      env: process.env.NODE_ENV
    })
  });
}

六、总结：学Vite插件值不值？

值！而且很值！

学习成本低：一个对象+几个钩子函数
应用场景广：任何自动化需求都能用插件解决
提升工程化能力：从「用工具」到「造工具」的跨越

记住核心三要素：

name：插件身份证
钩子函数：在正确的时间做正确的事
配置选项：让插件更灵活

最后留个作业：给这个插件加个功能，打包时如果版本号没变就警告，防止忘记更新版本。评论区等你答案！