如何在 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助手，依托大模型，帮助用户记录、整理和分析音视频内容，体验用大模型做音视频笔记、整理会议记录。