Vite配置插件时，为什么自定义钩子函数没有被触发？

欧阳彦鸽提问于 2026-02-11 10:08:34 阅读 52

工具

在开发环境用Vite打包时，我按文档给自定义插件加了closeBundle钩子，但控制台就是没输出调试信息。配置文件里已经用export default导出了插件对象，也试过把钩子写成async形式，重启服务后还是没反应，这是哪里配置错了吗？


export default ({ config }) => {
  return {
    name: 'my-plugin',
    closeBundle() {
      console.log('🎉 钩子触发了！'); // 这行根本没执行
    }
  }
}

插件是直接写在vite.config.js的plugins数组里引入的，其他基础配置比如别名 alias 都正常。查了两天没头绪，是不是Vite4.x之后钩子机制有变化？

我来解答赞 11 收藏

反馈

2 条解答

爱学习的智玲 Lv1

前端这块确实容易踩坑，特别是Vite这种快速迭代的工具。首先你得确认下 closeBundle 钩子的触发条件：它只会在生产环境打包结束时调用，开发环境下不会触发。

试试把你的插件配置改成这样：

export default {

  plugins: [

    {

      name: 'my-plugin',

      closeBundle() {

        console.log('🎉 钩子触发了！')

      }

    }

  ]

}

然后用 npm run build 来测试，别用 dev 命令。如果想在开发环境调试，可以临时加上 vite build --watch，不过这有点麻烦。

另外记得检查 vite.config.js 文件里有没有其他影响构建流程的插件或配置。有时候热更新机制会让人误以为钩子没生效。我之前也被这个问题搞懵过，折腾了半天才发现是环境问题。

要是还不行，试着在插件里加个 buildStart 钩子输出点信息，确认插件是不是正常加载了。

2026-03-30 21:13

A. 一鸣 Lv1

你的插件写法基本没问题，但 closeBundle 钩子只在构建结束时触发，开发环境（vite serve）下是不会执行的。你用 vite 命令启动的是开发服务器，自然看不到输出。

想验证钩子生效，得用构建命令。试试：

vite build

构建完成后看控制台，应该就能看到“🎉 钩子触发了！”。

另外，插件导出方式可以优化成更标准的形式，避免解构 config 造成误解（Vite 插件函数参数不是配置对象）：

export default function myPlugin() {

  return {

    name: 'my-plugin',

    closeBundle() {

      console.log('🎉 钩子触发了！');

    }

  }

}

然后在 vite.config.js 的 plugins 数组中引入它就行。

总结：不是钩子不触发，是你在 dev 模式下等一个 build 阶段的钩子，当然等不到。换 vite build 就能看到效果了。

2026-02-11 10:11