如何禁用 Vite 中的热更新（HMR）以避免 React 应用加载中断

张开发
• 2026/4/6 12:11:11 • 15 分钟阅读

最新文章

推荐文章

相关文章

分享文章

如何禁用 Vite 中的热更新（HMR）以避免 React 应用加载中断
本文介绍在 vite react 项目中彻底禁用热模块替换hmr的方法解决因自动重载导致长时间加载任务中断、状态丢失的问题并提供配置示例与关键注意事项。 本文介绍在 vite react 项目中彻底禁用热模块替换hmr的方法解决因自动重载导致长时间加载任务中断、状态丢失的问题并提供配置示例与关键注意事项。在开发大型 React 应用时某些功能如大数据初始化、复杂模型加载或长耗时计算可能需要数秒甚至数十秒完成。此时若 Vite 的热更新HMR被触发例如保存代码页面将自动刷新或局部重载导致所有前端状态清空、加载进度归零——严重影响调试效率与开发体验。Vite 默认启用 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, // ? 关键彻底禁用热模块替换 // 注意无需再配置 watch.usePolling 或 hmr.overlay }});?? 重要说明 知元AI AI智能语音聊天 对讲问答 AI绘画 AI写作 AI创作助手工具

更多文章