Vue.js 项目热重载由构建工具(Vite/Vue CLI)提供,VSCode 仅编辑调试;Volar 是必装插件,Vetur 已废弃;HMR 失效常见于修改根逻辑、非标准导出或配置禁用 HMR。

Vue.js 项目在 VSCode 中默认不带热重载(HMR),必须依赖 Vue 官方构建工具链(如 Vite 或 Vue CLI)启动开发服务器,VSCode 本身只负责编辑和调试——热重载不是它配置出来的,而是运行时环境提供的。
确认你用的是 Vite 还是 Vue CLI
热重载能力取决于你用的构建工具,不是 VSCode 插件开关决定的:
-
vite项目:开箱支持 HMR,执行npm run dev(或pnpm dev)后,浏览器访问http://localhost:5173即可自动热更新 -
vue-cli项目:运行npm run serve,默认端口是http://localhost:8080,同样支持 HMR - 纯 HTML +
vue.global.js引入?——不支持 HMR,只能手动刷新
VSCode 需要装哪些插件才“配合得好”
插件不提供热重载,但能避免编辑时出错、提升类型提示和语法识别:
- 必装:
Volar(Vue 官方推荐,替代已废弃的 Vetur) - 建议装:
TypeScript Vue Plugin (Volar)(增强.vue文件中的 TS 支持) - 可选:
ESLint(需项目已配eslint-plugin-vue) - 别装
Vetur:与 Volar 冲突,会导致模板语法高亮/跳转异常
常见热重载失效场景和排查点
不是代码没变,而是某些修改触发了完整重载(Full Reload)甚至卡住 HMR:
立即学习“前端免费学习笔记(深入)”;
- 修改
main.ts或根组件外层逻辑(如路由守卫、pinia store 初始化)→ 触发页面刷新而非热更新 - 在
setup()里改响应式逻辑没问题,但改export default的整个对象结构(比如删掉components字段)→ HMR 失败,控制台报[vite] hot updated: /src/App.vue但页面无反应 - 使用了非标准导出(如
export const xxx = defineComponent(...)而非export default)→ Volar 可能无法准确定位组件,HMR 行为不稳定 - 终端里没看到
[vite] hot updated:日志 → 检查是否误关了 Vite 的 HMR(比如加了--no-hmr参数)
HMR 是构建工具的能力边界,VSCode 只是前端。真正要调的不是 settings.json,而是确保 vite.config.ts 没禁用 server.hmr,且你改的是被 HMR 正确追踪的模块范围。










