VSCode调试Vite项目断点不命中，90%因launch.json的url未与浏览器地址栏完全一致或未运行vite dev；需确保url协议、端口、域名一字不差，type为pwa-chrome，webRoot为${workspaceFolder}，启用Volar Take Over Mode并禁用Vetur。
VSCode 调试 Vite 项目断点不命中，90% 是因为 launch.json 的 url 没和浏览器地址栏对齐，或者根本没启动 vite dev —— 不是插件装少了，也不是 VSCode 版本低。
launch.json 的 url 必须和浏览器地址栏一字不差
Vite 不会把 vite.config.ts 里的 server.port 或 server.https 自动同步给 VSCode。你手动改了端口或开了 HTTPS，url 就必须跟着改。
- 终端运行
vite dev后看到Local: http://localhost:3000/，那url就得写"http://localhost:3000"，不能写127.0.0.1、不能漏http://、不能多加/ - 如果
vite.config.ts里写了server.https: true，地址变成https://localhost:5173，url就必须写完整"https://localhost:5173"，且 Chrome 会拦一次，要点“高级 → 继续前往” -
file://协议下断点必然失效 —— Vite 是 HTTP 服务，不是静态文件预览
type 必须用 pwa-chrome，不能用 chrome
VSCode 1.8x 起已弃用旧版 chrome 类型，继续用会导致连接失败、断点灰色、报 “Unable to launch browser”。
- 正确配置：
"type": "pwa-chrome"（Edge 用户用"pwa-msedge"） -
"request": "launch"即可，不用"attach"—— VSCode 会自动打开浏览器并 attach -
"webRoot": "${workspaceFolder}"是硬性要求；写成"${workspaceFolder}/src"会导致 vite.config.ts 或根目录脚本断点显示“未绑定”
Volar 必须启用 Take Over Mode 并禁用 Vetur
Vue 3 + Vite 项目里，Vetur 和 Volar 冲突会导致 <script setup> 无法识别、ref 类型不提示、template 里 Ctrl+Click 失效，连带断点跳转异常。
- 在命令面板（Ctrl+Shift+P）搜
Extensions: Show Enabled Extensions，找到 Vetur → 右键 →Disable (Workspace) - 进 VSCode 设置 → Extensions → Volar → 勾选
Enable Take Over Mode - 改完必须完全退出 VSCode 再重开，否则语言服务器不会重新注册
- 项目根目录必须有
tsconfig.json或jsconfig.json，否则 Volar 的类型推导能力大幅下降
sourceMapPathOverrides 大概率该删掉
Vite 默认用内存内 inline sourcemap（//# sourceMappingURL=data:application/json;base64,...），没有 webpack:// 前缀。照搬 Webpack 项目的映射规则只会让断点永远灰色。
- 纯 Vite 项目建议直接删掉整个
sourceMapPathOverrides字段 - 如果用了
@/别名或 monorepo，才需加最简映射："*": "${webRoot}/*" - 别写
"webpack:///src/*": "${webRoot}/src/*"—— Vite 根本不生成这种协议路径
最容易被忽略的是：vite preview 和 vite build 都不支持调试，它们不启动开发服务器，也不注入 sourcemap；所有断点配置只对 vite dev 有效。调试前先盯住终端输出，确认看到 “Press Ctrl+C to stop” 才算真正跑起来了。
