如何在WebStorm中配置Vite项目的热更新调试？

先确认Vite服务是否真在跑HMR，WebStorm本身不提供热更新能力，它只是把保存动作传给底层开发服务器；按Ctrl+S没反应，大概率是Vite进程未启用HMR或启动方式错误，需检查终端输出、浏览器Console中[vite] hot updated:提示及sourcemap配置。 WebStorm里Ctrl+S没触发热更新，先确认Vite服务是否真在跑HMR WebStorm本身不提供热更新能力，它只是把保存动作传给底层开发服务器。按 没反应，大概率是Vite进程压根没启用HMR，或者终端里启动方式不对。 打开浏览器开发者工具 → 标签页，搜索 或 ：如果看到 才算真正生效；如果只刷出 ，说明每次保存都在全量重启，不是热更新。 确保你用的是 （对应 ）或 启动，别误点 WebStorm 自带的 “JavaScript Debug” 配置——它起的是 代理，和 Vite 的 冲突 检查终端输出第一行是否含 之后紧接着有 ，中间不能有报错或卡顿 Vite 项目默认开箱即用 HMR，无需额外插件；如果你手动改过 ，确认没误删 相关配置（一般不用设，默认开启） 断点灰色、无法停住？sourcemap 路径没对上 Vite 默认用 esbuild 编译 TS/JS，生成的是 inline sourcemap（直接塞在 JS 文件末尾），WebStorm 有时识别不稳定，导致断点变灰、调试器跳过。 在项目根目录的 中显式指定 sourcemap 输出方式： WebStorm Mac版 好用的JavaScript开发工具 下载 改完必须完全停止并重启 Vite 服务（不是热更，是 再 ） 进 WebStorm ，确认勾选了 浏览器访问务必用 Vite 输出的真实地址（如 ），别点 WebStorm 右上角 “Open in Browser” 按钮——它会打开内置服务器地址，sourcemap 路径对不上 调试时想进 Vue/React 组件逻辑，类型推导和 ref 提示不准 Vite 不处理类型检查，靠的是 TypeScript 和 IDE 协同。WebStorm 默认用内置 TS 服务，但项目里实际装的是 ，版本一不匹配， 、 就提示缺失，断点也可能因类型解析失败而失效。 进 ，把 改成 确认项目根目录有 ，且包含： 和 （Vue 项目）或 （React 项目） 如果用了 pnpm，检查 是否真实存在（pnpm 可能把它提升到顶层或放在 子目录下）；路径不对会导致 WebStorm 加载失败 运行配置里 npm dev 能跑，但 debug 点不了小虫子？Node.js 配置路径错了 WebStorm 的 “Debug” 按钮本质是启动一个 Node.js 进程来运行 Vite 入口，如果路径指向错误的文件，就会静默失败或报 。 新建运行配置时，类型选 ，不要选 “npm” —— npm 配置只能 run，不能 debug 必须填 （注意不是 ，那是 Vitest 的入口） 填 ， 设为项目根目录 勾选 ，URL 写 ，端口必须和 Vite 实际监听的一致 最常被忽略的是：调试启动后，必须在 WebStorm 自动打开的那个浏览器标签页里操作，其他窗口或手动输入地址进的页面，断点不会命中——因为只有那个标签页才连上了 WebStorm 注入的调试协议通道。