VS Code 本身不提供 vue.js 热重载（HMR），HMR 由 Vue CLI、vite 或 webpack 等构建工具实现；需确保开发服务器正常运行、配置正确扩展（如 Volar）、避免语法错误中断 HMR 流程，并理解 HMR 不重置状态等限制。
VS Code 本身不提供 Vue.js 热重载（HMR）能力，它只是编辑器；热重载由 Vue CLI、Vite 或 Webpack 等构建工具实现。你真正要做的，是让 VS Code 正确识别项目、配合终端中的开发服务器，并避免因配置缺失导致 HMR 失效。
确认项目已启用 HMR 工具链
热重载不是 VS Code 的功能，而是运行在终端里的开发服务器提供的。常见组合：
- Vue CLI 项目：执行
npm run serve或yarn serve启动webpack-dev-server，默认开启 HMR - Vite 项目：执行
npm run dev，内置 HMR，响应极快 - 纯 Webpack 手动配置：需确保
devServer.hot为true，且入口文件中引入了module.hot相关逻辑（Vue 项目一般不需要手写）
如果保存文件后浏览器没刷新，先检查终端里是否看到类似 [vite] hot updated: /src/app.vue 或 Compiled successfully 的日志 —— 没有就说明服务根本没跑起来，或监听路径不对。
VS Code 必装扩展与基础配置
没有这些，Vue 单文件组件（.vue）的语法高亮、模板补全、类型提示会出问题，间接影响 HMR 体验（比如改了 setup() 但 TS 报错导致模块无法热更新）。
立即学习“前端免费学习笔记（深入）”；
- 装官方扩展：
Volar（非Vetur，后者已弃用，与 Vue 3 + TS 冲突） - 禁用
Vetur（如有）：VS Code 设置中搜vetur，勾掉启用 - 在项目根目录添加
jsconfig.json（Vue CLI）或tsconfig.json（Vite + TS），确保"compilerOptions": { "allowSyntheticDefaultImports": true }等基础项存在 - 打开文件时，右下角确认语言模式是
Vue（不是html或Plain Text）；如不是，点击切换并选择Configure File Association for '.vue'→Vue
常见 HMR 失效原因与修复
不是代码没变，而是 HMR 流程被中断。以下情况 VS Code 不背锅，但你得知道怎么查：
-
console.Error报错卡住模块更新：比如setup()中抛异常，整个组件模块会被 webpack/Vite 踢出 HMR 队列，必须手动刷新。解决方法是修复错误，再保存一次 - 使用了不支持 HMR 的 API：如直接修改
data原始对象属性（this.obj.newProp = 1），Vue 2 需用this.$set；Vue 3 中响应式丢失常因解构破坏了ref/reactive包裹 - 样式 HMR 异常：css-in-JS 或
css.hotReload（Vite 默认开），或是否误加了!important导致样式覆盖失败 - 终端中开发服务器被意外终止：VS Code 内置终端关闭、或你按了
Ctrl+C又没重启，HMR 自然停止 —— 这是最常见的“以为坏了”场景
调试时别依赖“自动保存+HMR”闭环
VS Code 的 files.autoSave 设为 onFocusChange 或 onDelay 是安全的，但别设成 onWindowChange（切窗口就保存），容易触发未完成的代码保存，导致 HMR 报错。更关键的是：
- HMR 不等于实时预览：它只替换模块，不重置组件状态、不恢复路由、不清空
localStorage - 某些深层响应式变更（如嵌套 5 层的
ref）可能触发不了更新，此时需要key强制重渲染，或加console.log确认响应式依赖是否被正确追踪 - 如果频繁遇到 HMR 挂起，可在终端中输入
r（Vite）或rs（Vue CLI）手动热重启服务，比关掉重开快得多
真正卡住的点，往往不在 VS Code 设置里，而在你改的那一行响应式代码有没有被 Vue 的依赖收集系统捕获到 —— 这才是热重载背后最不透明、也最容易忽略的部分。