ViteHMR秒更新技巧全解析

Vite 的 HMR 本应带来秒级热更新体验，但现实中常因模块未被正确纳入热更新链路、副作用未清理、或误入 CSS-in-JS/动态 import/__dirname 三大陷阱而“静默失效”——本文直击开发中高频踩坑点，详解如何通过 `import.meta.hot.accept` 显式接管 Vue 组件副作用、普通工具模块状态重置，以及精准识别和规避监听断裂根源，帮你真正激活 Vite 的热更新能力，让每一次保存都即时可见。

为什么改了代码但页面没更新？检查 HMR 是否真正启用

Vite 默认开启 HMR，但实际失效很常见。最典型的是你修改了 src/utils/request.ts，但调用它的组件没重载——这往往不是 HMR 坏了，而是模块被意外“断连”了：比如该工具函数被某个全局 import 在 main.ts 里，又通过 app.config.globalProperties 挂载，而 Vue 插件或配置层未正确声明 accept 或 invalidate。Vite 的 HMR 是模块粒度的，只对直接 import 的模块生效；间接依赖（如通过 this.$xxx 访问）不会触发更新。

验证方法：在任意模块顶部加一行 console.log('hot updated:', Date.now())，保存后看控制台是否出现新日志。没有？说明该模块根本没被 HMR 纳入监听——检查它是否被 import 在热更新链路上，而不是仅出现在构建时的 tree-shaking 外围。

Vue 组件中如何让 setup() 里的逻辑响应 HMR？别漏掉 import.meta.hot

单文件组件默认支持 HMR，但如果你在 setup() 中写了副作用逻辑（比如初始化 WebSocket、注册事件监听器），这些不会自动清理，导致多次热更后重复执行。必须手动接管：

• 在