如何在 Vite + React 项目中禁用自动热更新（HMR）

本文详解如何在 vite 开发服务器中彻底禁用热模块替换hmr避免长时间操作如大文件上传、复杂计算因页面自动刷新而中断进度同时提供配置示例与关键注意事项。 本文详解如何在 vite 开发服务器中彻底禁用热模块替换hmr避免长时间操作如大文件上传、复杂计算因页面自动刷新而中断进度同时提供配置示例与关键注意事项。在基于 Vite 的 React或其它框架开发中热模块替换HMR默认处于启用状态它能快速局部更新组件逻辑提升开发体验。但当应用涉及耗时较长的用户交互流程例如大型数据导入、Canvas 渲染动画、表单分步提交、WebSocket 长连接状态维持等HMR 触发的自动更新会强制重载模块甚至整个页面导致内存状态丢失、加载中断、进度归零——这不仅影响调试效率更可能掩盖真实业务逻辑缺陷。要完全禁用 HMR即关闭所有热更新行为包括模块级更新和页面自动刷新只需在 vite.config.ts 的 server 配置项中将 hmr 显式设为 false// vite.config.tsimport { defineConfig } from vite;import react from vitejs/plugin-react-swc;export default defineConfig({ plugins: [react()], server: { host: true, port: 5173, hmr: false, // ? 关键配置彻底禁用 HMR // 注意无需再配置 hmr.overlay 或 watch.usePolling —— 它们在 hmr: false 下自动失效 }});? 效果说明 通义听悟 阿里云通义听悟是聚焦音视频内容的工作学习AI助手依托大模型帮助用户记录、整理和分析音视频内容体验用大模型做音视频笔记、整理会议记录。