Browser Preview 不能接 HMR，它仅静态预览不支持热更新；要实现真实 HMR 效果，需在 Browser Preview 中打开 Vite 等开发服务器地址（如 http://localhost:5173），确保引入 /@vite/client 脚本且文件被正确引用。
VSCode Browser Preview 能不能接 HMR？
不能直接接。Browser Preview 是个纯预览工具，它只加载最终 HTML 和静态资源，不启动 WebSocket、不注入 HMR runtime、也不理解 vite 或 webpack-dev-server 的更新协议。你改了 src/App.vue，Browser Preview 不会收到任何热更新信号，只会等你手动刷新。
它适合静态页面或已构建完成的产物（如 dist/index.html），但不是开发时的 HMR 环境替代品。
怎么让 VSCode 内嵌浏览器看到真实 HMR 效果？
唯一可靠路径是：用 Browser Preview 打开开发服务器提供的地址，而不是本地文件路径。
- 确保你的项目已运行
vite或npm run dev，终端能看到类似[vite] hot updated: /src/components/Hello.vue的日志 - 在 Browser Preview 中点击右上角 Open in Browser → 选择
http://localhost:5173（Vite 默认）或http://localhost:3000（自定义端口） - 确认 Browser Preview 地址栏显示的是
http://开头，不是file:/// - 如果页面空白，检查 Browser Preview 控制台是否有跨域报错——Vite 默认允许所有来源，但某些代理配置可能拦截
/@vite/client请求
Vite + Browser Preview 组合下常见失效点
看似连上了，但改代码没反应，大概率卡在这几个环节：
-
vite.config.ts里没开server.hmr.overlay（默认为true，但若设为false就不显示错误弹窗，容易误判 HMR 正常） - Browser Preview 加载的 HTML 没正确引入 Vite 的客户端脚本——检查源码里是否包含
<script type="module" src="/@vite/client"></script> - 你编辑的文件没被当前页面实际引用（比如改了
src/utils.ts，但该模块未被任何已加载组件 import） - VSCode 设置中启用了
files.autoSave，但保存时触发了格式化插件（如 Prettier），导致语法临时错误，中断 HMR 流程
为什么 Debugger for Chrome 也刷不出 HMR？
因为调试器和热更新是两条独立通路：Debugger for Chrome 只负责建立 DevTools 协议连接、打断点、读变量；而 HMR 完全由浏览器里运行的 @vite/client 或 webpack/hot/dev-server 脚本驱动。
换句话说：你在 VSCode 里设断点，靠的是 Chrome 的远程调试端口；你改代码后 UI 更新，靠的是 Vite 注入的 WebSocket 客户端。两者共存，但互不依赖。
最容易被忽略的一点：如果你关掉了浏览器的 DevTools 面板，某些旧版 Vite 的 overlay 错误提示会失效，看起来像“HMR 停了”，其实只是报错被吞了——打开 DevTools 再试一次，往往就能看到真实错误堆栈。
