如何禁用 Vite 中的热更新（HMR）以防止 React 应用页面自动重载

本文介绍在 vite react 项目中彻底禁用热模块替换hmr的方法避免长时间加载任务因自动刷新而中断确保用户操作进度不丢失。 本文介绍在 vite react 项目中彻底禁用热模块替换hmr的方法避免长时间加载任务因自动刷新而中断确保用户操作进度不丢失。在使用 Vite 开发 React 应用时其默认启用的热模块替换HMR机制虽能提升开发体验但在某些特殊场景下反而成为干扰因素——例如执行耗时较长的数据初始化、大文件上传、复杂状态计算或模拟真实后端延迟等操作时代码保存触发的 HMR 会强制刷新页面或局部重载组件导致所有前端状态如 loading 状态、临时表单数据、WebSocket 连接、Canvas 绘图上下文等瞬间丢失严重影响调试与功能验证。要完全禁用 Vite 的自动重载行为只需在 vite.config.ts 的 server 配置项中显式关闭 HMR// 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, // ? 关键配置彻底禁用热模块替换 // 其他如 watch、overlay 等配置将被忽略hmr: false 时自动失效 }});? 效果说明设置 hmr: false 后Vite 将不再监听文件变更并推送更新也不会注入 HMR 客户端运行时逻辑。此时修改源码仅会在控制台输出变更日志浏览器页面将保持完全静止无任何自动刷新或模块热替换发生。?? 注意事项 Cleanup.pictures 智能移除图片中的物体、文本、污迹、人物或任何不想要的东西