HMR失效主因是开发服务器配置错误或链路中断，非IDE问题；需检查vue.config.js中devServer.hot是否被设为false、关闭PhpStorm Safe write、禁用内置终端、确保main.ts中调用import.meta.hot.accept，并重启服务生效。
PhpStorm 本身不接管 HMR，热更新失效几乎从来不是 IDE 的问题，而是开发服务器、文件监听或配置链路断了——关掉 Safe write 只是第一步，真正卡住的往往是 devServer.hot 被设为 false、liveReload 和它冲突，或者你在 PhpStorm 内置终端里跑了 npm run serve，根本没启动真正的服务。
为什么改了 .vue 文件浏览器没反应？先看终端有没有 HMR 日志
打开终端（别用 PhpStorm 内置终端），运行 npm run serve 后，第一眼盯住输出：
- 必须看到类似
Compiled successfully和HMR enabled或[WDS] Hot Module Replacement enabled的提示 - 如果只看到
Compiling...就停住，或出现Hot Module Replacement disabled，说明 HMR 没启用 - 若日志里有
[vite] hmr update /src/xxx.vue但页面不动，问题在 Vue 层或组件内部状态管理，不是构建工具
Vue CLI 项目里 devServer.hot 被悄悄关掉了
检查 vue.config.js，常见错误是显式写了 hot: false —— 这会直接覆盖 Vue CLI 默认行为。哪怕你只加了一行配置，也可能触发覆盖。
- 删掉
devServer.hot字段，让 Vue CLI 用默认值（true） - 如果必须保留
devServer配置块，请确保写全：hot: true且liveReload: false，二者不能共存 - 注意：命令行参数如
npm run serve -- --live-reload会重置配置，导致hot失效
PhpStorm 的 Safe write 和内置终端是两大隐形杀手
Safe write 开启时，PhpStorm 把文件先写到临时路径再替换，webpack 监听的是原始路径，变更事件根本发不出去；而内置终端缺少完整 TTY 支持，npm run serve 会挂起、不监听、不建立 WebSocket 连接。
立即学习“PHP免费学习笔记（深入）”；
- 关闭
Safe write：Settings → Appearance & Behavior → System Settings → 取消勾选Use "safe write" - 绝对不要在 PhpStorm Terminal 里跑
npm run serve或pnpm dev；用系统终端（macOS Terminal / Windows PowerShell）启动服务，PhpStorm 只负责编辑和调试 - 改完配置后，已运行的服务必须重启，否则新设置不生效
import.meta.hot.accept 在 Vite 项目里不是可选项
Vite + Vue 3 项目中，HMR 不是开个开关就完事的。入口文件（如 main.ts）必须主动调用 import.meta.hot.accept，否则即使终端打印了更新日志，运行时也不会触发重挂载。
- 确认
main.ts中有类似代码：if (import.meta.hot) { import.meta.hot.accept(() => { app.unmount() app = createApp(App) app.mount('#app') }) } - 如果用了
<keep-alive></keep-alive>或第三方库（如Vue.Draggable），热重载后状态丢失不是 HMR 问题，而是组件未正确销毁 Sortable 实例——得在beforeUnmount里手动调sortable.destroy() - 样式不更新？优先怀疑
<style scoped>作用域隔离导致新旧 style 标签共存，临时去掉scoped快速验证
最常被忽略的一点：HMR 日志正常 ≠ 页面更新成功。日志只说明构建层收到了变更，真正决定 DOM 是否重绘的，是 Vue 运行时是否收到并执行了模块替换逻辑——这取决于入口是否注册了 accept、组件是否在响应式边界内、以及有没有第三方 DOM 操作残留。
