VSCode不配置Vite，热更新由vite进程控制，断点命中取决于source map路径映射、launch.json地址匹配及浏览器是否加载带map代码；npm run dev无反应需先确认命令正确、端口未被占、依赖已安装。
VSCode 不需要“配置 Vite”，它本身不启动、不控制热更新、也不决定断点是否命中；真正起作用的是终端里 npm run dev 启动的 Vite 进程，以及浏览器加载代码时能否正确解析 source map。
npm run dev 没反应？先看终端输出和 package.json
绝大多数“热更新没反应”问题，根源是开发服务器根本没跑起来。
-
package.json中"dev": "vite"必须存在且准确；"dev": "vite dev"或"dev": "vite build"都会失败 - 执行
npm run dev后，终端必须出现类似Local: http://localhost:5173/的输出；如果卡在building...或报command not found: vite，说明node_modules/.bin/vite缺失，重装依赖：npm install - 默认端口
5173被占时，Vite 不会自动换端口，直接报错；可临时指定：vite --port 3000，或在vite.config.ts中加server.port: 3000
改了代码不刷新？检查浏览器缓存和 JS 错误
HMR 被阻断往往不是 VSCode 设置问题，而是前端运行时环境异常。
- 打开浏览器 DevTools → Network → 勾选
Disable cache - 切换到 Console 标签页，确认没有未捕获的 JS 报错——任何语法或运行时错误都会中断 HMR 流程
- 确保你不是用
file://协议直接双击 HTML 打开页面；Vite 是 HTTP 服务，file://下 source map 根本不会加载
断点灰色 / 不命中？launch.json 和 source map 映射必须对齐
Vite 默认用内存内 inline source map，不生成 .map 文件，所以大部分 Webpack 风格的调试配置反而会破坏它。
立即学习“前端免费学习笔记（深入）”；
-
launch.json中必须用"type": "pwa-chrome"（旧版chrome类型已弃用） -
"url"字段必须和浏览器地址栏**完全一致**：协议（http://或https://）、域名、端口、路径都不能差；例如终端输出Local: https://localhost:5173/，那就得写"url": "https://localhost:5173" -
"webRoot": "${workspaceFolder}"是必须的；写成"${workspaceFolder}/src"或漏掉都会导致断点“未绑定” -
sourceMapPathOverrides字段在纯 Vite 项目中通常可以整个删掉；只有用了@/别名或 monorepo 时才需微调，例如："@/components/*": "${webRoot}/src/components/*"
Vue 项目断点进不了 template？Volar Take Over Mode 没开
Vue 3 + Vite 项目里，<template> 内断点跳转、ref 类型推导失效，90% 是因为 Volar 没接管语言服务。
- 安装 Volar 后，必须进入 VS Code 设置 → Extensions → Volar → 勾选
Enable Take Over Mode - 如果之前装过 Vetur，务必禁用它；两者共存会导致
<script setup>语法高亮消失、Ctrl+Click 跳转失败 - 项目根目录必须有
tsconfig.json（TS 项目）或jsconfig.json（JS 项目），否则类型能力大幅降级 - 右下角状态栏显示的 TypeScript 版本要是
Workspace version，不是Bundled——否则类型检查脱节
最常被忽略的点：Vite 的热更新和调试链路极度依赖路径一致性。从 vite.config.ts 的 server.port，到终端输出的 URL，再到 launch.json 的 url，再到浏览器实际访问的地址，任何一个环节协议、端口或路径不匹配，断点就失效，HMR 就静默——它不会报错，只会不工作。
