webstorm保存后vue项目无热更新，需先在系统终端运行开发命令并确认hmr日志；检查vue.config.js或vite.config.ts中hot配置、sourcemap设置及import.meta.hot调用；关闭safe write、禁用livereload、清理残留进程与缓存后重启。
WebStorm保存后Vue项目没反应，先看终端有没有HMR日志
按 Ctrl+S 没触发更新，不是 WebStorm 没保存成功，而是底层服务压根没收到变更信号。第一件事是打开系统终端（别用 WebStorm 内置 Terminal），运行 npm run serve 或 pnpm dev，盯住输出：
- 必须看到类似
[WDS] Hot Module Replacement enabled.或[vite] server started+hot updated日志 - 如果只卡在
Compiling...或反复出现server restarted，说明 HMR 没启用，或服务根本没跑起来 - Vue CLI 项目里，
vue.config.js中若显式写了devServer: { hot: false }，会直接关闭 HMR —— 删掉这行，让默认值生效
Safe write 关了，但热更新还是断的？检查 liveReload 和 hot 是否冲突
Safe write 关闭只是基础动作，真正卡住 HMR 的常是配置层面的互斥设置。Webpack Dev Server 的 hot 和 liveReload 是两条独立通道，同时开启时浏览器优先走整页刷新。
- 在
vue.config.js或webpack.config.js的devServer字段中，必须同时写：hot: true且liveReload: false - 命令行参数如
npm run serve -- --live-reload会覆盖配置，导致hot失效 - Vite 项目默认不启用
liveReload，但如果手动加了server.hmr: { overlay: false }之类配置，需确认没误删hmr字段本身
Vue 3 + Vite 项目改了模板不更新？sourcemap 和 import.meta.hot 可能没对上
Vite 默认生成 inline sourcemap，WebStorm 有时解析不稳定，断点变灰、HMR 日志有但页面不动，大概率是 sourcemap 路径错位或组件热更新逻辑未注册。
- 在
vite.config.ts中显式设build: { sourcemap: true }（别写'inline'） - 确保每个
.vue文件的<script setup></script>里有import.meta.hot?.accept()调用（Vite 3.2+ 自动注入，但老版本或自定义构建需手动补） - WebStorm 设置里：Settings → Languages & Frameworks → JavaScript → Debugging → 勾选
Enable JavaScript source maps - 浏览器务必访问
http://localhost:5173/（Vite 真实地址），别点 WebStorm “Open in Browser” 按钮——它打的是http://localhost:63342/，路径完全不对
重启不生效？这些地方改完必须彻底 kill 进程再重启
很多配置修改看似生效，但旧进程残留会继续监听旧状态，导致新设置“看起来没用”。
- 关掉所有 WebStorm 的 Run Configuration，包括已停止但还在后台的 Node.js 进程
- 用
killall node（macOS/Linux）或taskkill /f /im node.exe（Windows）清空残留 - 删掉
node_modules/.vite或dist目录（Vite 缓存易出错） - 重新在系统终端执行
npm run dev，不要复用旧终端窗口
最易被忽略的是：Vite 的 HMR 日志和 Vue 组件的实际更新是两层逻辑。终端看到 [vite] hmr update 只代表文件被识别并推送到客户端，最终是否重渲染，取决于 @vue/compiler-sfc 版本、vue-loader 兼容性，以及组件内部是否用了不可热替换的 API（比如直接修改 data 对象而非响应式引用）。这类问题不会报错，但热更新就是不动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
