VSCode调试Vite项目断点不生效的主因是三处配置链断裂：vite dev服务未启动、launch.json的url与浏览器地址不一致、Volar未启用Take Over Mode；需确保服务运行、url完全匹配、使用pwa-chrome类型、webRoot设为${workspaceFolder}、Volar启用Take Over Mode并完全重启VSCode。
VSCode 调试 Vite 项目断点不生效，基本不是插件没装或 VSCode 版本低，而是三处配置链断裂：vite dev 服务未启动、launch.json 的 url 与浏览器地址栏不一致、Volar 未启用 Take Over Mode。
确保 vite dev 服务已运行且端口匹配
Vite 不提供调试协议入口，VSCode 是通过 attach 浏览器实现调试的。必须先手动执行 vite 或 vite dev 启动开发服务器，再点 VSCode 的 Launch 按钮 —— 后者只是打开浏览器并自动 attach，不是启动 vite 进程本身。
-
url字段必须和终端里 vite 输出的地址完全一致（含协议、端口、路径），比如终端显示http://localhost:3000，就不能写成http://127.0.0.1:3000或漏掉http:// - 如果改过
vite.config.ts中的server.port（如设为8080），launch.json里的url也必须同步改成"http://localhost:8080" - 别用
vite build && vite preview：那是静态产物，无 source map、无 HMR、无法调试
launch.json 必须用 pwa-chrome 类型 + 正确 webRoot
旧版 type: "chrome" 在 VSCode 1.8+ 已弃用，会导致连接失败；webRoot 错误则所有断点显示「未绑定」。
- 必须用
"type": "pwa-chrome"（或"pwa-msedge"），不能用"chrome" -
"webRoot": "${workspaceFolder}"—— 不是"${workspaceFolder}/src"，否则vite.config.ts或根目录脚本里的断点会失效 -
sourceMapPathOverrides在标准 Vite 项目中通常不需要；若删掉后仍断点灰色，才考虑加最简映射："*": "${webRoot}/*"
Volar 必须启用 Take Over Mode 并禁用 Vetur
Vue 3 + Vite 项目里，Vetur 已废弃，它和 Volar 冲突会导致 <script setup></script> 语法高亮消失、ref 类型不识别、template 里无法跳转。
- 在 VSCode 命令面板（
Ctrl+Shift+P）中搜Extensions: Show Enabled Extensions，找到 Vetur → 右键 →Disable (Workspace) - 确认 Volar 已启用，且版本 ≥ 1.10.0（老版本不支持
defineModel等新语法） - 进入 VSCode 设置 → Extensions → Volar → 勾选
Enable Take Over Mode - 改完必须**完全退出 VSCode 再重开**，否则语言服务器不会重新注册
根目录必须有 tsconfig.json 或 jsconfig.json
Volar 的类型推导、defineProps 提示、@/ 别名跳转都依赖这个文件。没有它，ref、computed 全部报红，IDE 提示基本归零。
- TS 项目：确保根目录有
tsconfig.json，且compilerOptions.types包含"vue"和"vite/client" - JS 项目：必须有
jsconfig.json，且"checkJs": true开启，否则 Volar 不校验 JS 中的defineProps - 删掉
src/tsconfig.json这类嵌套配置 —— Volar 只读取项目根目录下的配置文件
最容易被忽略的是：Volar 启用 Take Over Mode 后，必须完全重启 VSCode；以及 webRoot 设错导致断点「未绑定」时，很多人会反复检查 sourceMapPathOverrides，却忘了它根本不用配。
