PhpStorm运行Vue代码不热更新_修复HMR失效导致无法实时执行【排雷】-phpstorm-PHP中文网

hmr失效主因是开发服务器配置错误或链路中断，非ide问题；需检查vue.config.js中devserver.hot是否被设为false、关闭phpstorm safe write、禁用内置终端、确保main.ts中调用import.meta.hot.accept，并重启服务生效。

phpstorm运行vue代码不热更新_修复hmr失效导致无法实时执行【排雷】

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 默认行为。哪怕你只加了一行配置，也可能触发覆盖。

amphp

使用 AMPHP 框架编写非阻塞异步 PHP 代码，依赖 revolt/event-loop、amphp/amp ^3 及完整 amphp/* 生态（http‑server、http‑client 等）。

下载

删掉 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 连接。

关闭 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> 作用域隔离导致新旧 style 标签共存，临时去掉 scoped 快速验证