vscode 调试 vite 项目需满足三条件：vite 开发服务器已启动、launch.json 配置正确（url 必须与浏览器地址栏完全一致，含协议端口）、浏览器加载带 source map 的代码；volar 启用 take over mode、禁用 vetur、根目录有 tsconfig.json/jsconfig.json、删掉 sourcemappathoverrides 或仅保留 "*": "${webroot}/\*"、webroot 设为 "${workspacefolder}"。
VSCode 调试 Vite 项目能直接断点，但前提是 vite 开发服务器已启动、launch.json 配置正确、且浏览器加载了带 source map 的代码——三者缺一不可。常见“断点灰色”“未绑定”问题，90% 出在配置链断裂，不是插件没装或 VSCode 版本低。
launch.json 必须匹配 vite dev 实际端口和协议
VSCode 不会自动读取 vite.config.ts 里的 server.port 或 server.https，全靠你手动填进 launch.json 的 url 字段。填错端口（比如默认写 5173，但实际是 3000）或漏掉 http:// 前缀，调试器连不上页面，所有断点都失效。
-
url必须和浏览器地址栏完全一致（含端口、协议、路径），例如："url": "http://localhost:5173" - 如果 vite 启用了 HTTPS（
server.https: true），url得写成"https://localhost:5173"，且 Chrome 会提示不安全，需手动点“高级 → 继续前往” - 不要用
file://协议——Vite dev server 是 HTTP 服务，不是静态文件，file://下 source map 根本不会加载
Volar 插件必须启用 Take Over Mode
Vue 3 + Vite 项目里，Vetur 已废弃，Volar 是唯一支持 <script setup></script> 类型推导和 template 内断点跳转的插件。但它默认不接管 TS/JS 语言服务，导致 VSCode 无法识别 ref、computed 类型，断点打在 template 里也无效。
- 安装 Volar 后，必须进入 VS Code 设置 → Extensions → Volar → 勾选 Enable Take Over Mode
- 如果之前装过 Vetur，务必禁用它，否则两者冲突，
<script setup></script>语法高亮消失、Ctrl+Click跳转失败 - 项目根目录必须有
tsconfig.json或jsconfig.json，否则 Volar 的类型能力大幅降级
sourceMapPathOverrides 配置不能照抄 Webpack 模板
Vite 默认用的是内存内 inline source map，没有 webpack:// 协议前缀。如果你直接复制 Vue CLI 或 Webpack 项目的 sourceMapPathOverrides，比如 "webpack:///src/*": "${webRoot}/src/*"，VSCode 就找不到映射关系，断点永远灰色。
- Vite 项目应删掉整个
sourceMapPathOverrides字段，或只保留最简映射："*": "${webRoot}/*" - 确保
webRoot是"${workspaceFolder}"，不是"${workspaceFolder}/src"——后者会让src外的文件（如vite.config.ts）无法命中断点 - 检查
vite.config.ts是否误加了build.sourcemap: false（开发模式下这个配置无效，但加了可能干扰某些插件）
调试前必须先手动运行 vite dev
VSCode 的 launch.json 不会自动执行 npm run dev，它只负责连接已运行的服务。很多人点了 F5 就等浏览器弹出，结果卡在加载状态，是因为根本没启动服务。
- 先在 VSCode 集成终端执行
npm run dev（或pnpm dev、yarn dev），确认控制台输出Local:地址且浏览器能正常访问 - 再点 VSCode 左侧“运行和调试”→ 选择配置 → 点绿色三角形（F5）；此时 Chrome 才会启动并连接已有服务
- 如果用 NPM Scripts 扩展，可右键 package.json 里的
dev脚本 → “Run Script”，比手动敲命令快，但本质仍是调用 npm
真正容易被忽略的点是：Vite 的 inline source map 只存在于内存，不生成 .map 文件，所以任何依赖落地文件路径的调试逻辑（比如自定义 sourceMapPathOverrides 或旧版插件）都会失效。别试图“修复”它，接受它的存在方式——删掉多余配置，让 VSCode 直接按相对路径解析即可。
