WebStorm中Vite断点不生效需关闭esbuild inline sourcemap并启用JS source maps，配置npm类型Run Configuration以确保VITE环境变量和插件链完整，同时正确设置Vue支持与SFC解析。
WebStorm 里 vite 启动后断点不生效？先关掉 esbuild 的 inline sourcemap
默认 vite 开发服务器用 esbuild 做 TS/JS 编译，它生成的 sourcemap 是 inline 形式（直接塞在 JS 文件末尾），WebStorm 有时识别不稳定，导致断点灰色、无法停住。
- 打开项目根目录的
vite.config.ts或vite.config.js - 在
build配置里显式关闭 inline：build: {<br> sourcemap: true, // 不要设为 'inline'<br>} - 重启
vite服务（不是热更，是完全 stop + start） - 确保 WebStorm 的
Settings > Languages & Frameworks > JavaScript > Debugging中勾选了Enable JavaScript source maps
配置 Run Configuration 时，为什么选 npm 而不是 Node.js？
Node.js 类型配置会绕过 package.json 的 scripts 和环境变量，而 vite 依赖 VITE_* 环境变量和 define 配置，直接跑 node node_modules/vite/bin/vite.js 很容易漏掉这些。
- 新建 Run Configuration → 选
npm类型 -
Package.json script选dev（或你定义的启动脚本名） - 确认
Working directory是项目根路径，不是src或其他子目录 - 如果用了
vite-plugin-react-swc等插件，确保对应依赖已安装，否则 npm 脚本执行时会报错退出，但 WebStorm 可能只显示 “process finished with exit code 1” 而不打印具体错误
断点打在 .vue 文件的 <script setup> 里没反应？检查 SFC 解析模式
WebStorm 默认把 .vue 当作纯 HTML 处理，不主动解析 <script setup> 里的逻辑，断点位置映射会出错。
- 进
Settings > Languages & Frameworks > JavaScript > Libraries，确认已启用Vue.js支持（有 Vue 图标） - 右键
src目录 →Mark Directory as > Resources Root（避免被当成普通静态资源） - 如果用的是 Vue 3.3+ 的
defineOptions或defineSlots，确保 WebStorm 版本 ≥ 2023.2，老版本对新语法支持不全 - 临时验证：在
<script setup>里加一句debugger，运行时看浏览器是否真的停住 —— 如果浏览器能停，说明是 WebStorm 映射问题；如果连浏览器都不停，就是 vite 配置或插件链的问题
调试时看到 Uncaught SyntaxError: Cannot use import statement outside a module？别用 index.html 直接双击打开
这是最常被忽略的起点错误：WebStorm 调试必须走 vite 开发服务器（http://localhost:5173），而不是用文件协议打开 index.html。后者没有模块解析能力，所有 import 都会崩。
- Run Configuration 启动后，务必等 WebStorm 控制台输出类似
✓ Local: http://localhost:5173/再访问该地址 - 不要在浏览器里手动输入
file:///xxx/index.html - 如果用了
base配置（比如base: '/my-app/'），记得访问http://localhost:5173/my-app/，否则资源 404，控制台报错会掩盖真实调试问题
