Vite 升级后 HMR 失效、频繁全页重载，根本原因在于 import.meta.hot 在生产构建中未定义；只需用条件判断包裹 hot.accept() 即可安全启用热更新，兼顾开发体验与构建稳定性。
vite 升级后 hmr 失效、频繁全页重载，根本原因在于 `import.meta.hot` 在生产构建中未定义；只需用条件判断包裹 `hot.accept()` 即可安全启用热更新，兼顾开发体验与构建稳定性。
在 Vite 4.x（尤其是 v4.4+）中，许多开发者发现：即使仅修改一行文本或 JSX 结构，浏览器仍触发全页刷新（Full Page Reload），而非预期的模块热替换（HMR）。这不仅打断开发流程，还显著降低调试效率。问题根源并非配置错误或插件冲突，而是对 import.meta.hot 的误用——它仅在开发环境存在，构建产物中为 undefined。若直接调用 import.meta.hot.accept() 而不加判断，生产构建会因 Cannot read properties of undefined (reading 'accept') 报错而失败。
✅ 正确做法：安全启用 HMR
在 src/index.js（或 main.tsx）入口文件中，将裸调用改为条件判断：
// src/index.js
import React from "react";
import ReactDOM from "react-dom/client";
import { Provider } from "react-redux";
import { store, persistor } from "./store";
import { PersistGate } from "redux-persist/integration/react";
import { BrowserRouter } from "react-router-dom";
import "./index.css";
import App from "./App";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<React.StrictMode>
<BrowserRouter basename="/">
<App />
</BrowserRouter>
</React.StrictMode>
</PersistGate>
</Provider>
);
// ✅ 安全启用 HMR：仅在开发环境生效
if (import.meta.hot) {
import.meta.hot.accept();
}⚠️ 注意事项：
- 不要在 render 之前或 createRoot 调用内部添加 hot.accept()；
- 不要对 App 组件单独 hot.accept('./App') —— Vite + React 插件已自动处理组件级 HMR；
- 若使用 React.StrictMode 嵌套（如示例中出现两次），请精简为单层，避免潜在副作用干扰 HMR 稳定性；
- 确保 @vitejs/plugin-react 版本 ≥ 4.0.0（当前为 ^4.0.4，符合要求），该插件内置对 import.meta.hot 的标准化支持。
? 验证 HMR 是否生效
启动开发服务器后，观察控制台输出：
- ✅ 正常 HMR：控制台显示 hmr update 或 accepted update，页面局部刷新（如组件内容变化），URL 不跳转，状态不丢失；
- ❌ 全页刷新：显示 full reload，且控制台无 hmr 相关日志 —— 此时应检查是否遗漏条件判断，或是否存在未被 HMR 覆盖的全局副作用（如直接操作 window、document）。
? 补充说明：为什么旧版 Vite 3.x 没这个问题？
Vite 3.x 默认对入口模块隐式启用 HMR（无需手动调用 hot.accept()），而 Vite 4.x 更严格地将 HMR 控制权交还给开发者，并明确区分开发/生产环境。这种设计提升了构建确定性，但也要求开发者显式、安全地接入热更新机制。
通过 if (import.meta.hot) 这一轻量级守卫，你既保留了 Vite 4.x 的现代构建能力，又恢复了丝滑的 HMR 开发体验——无需降级、无需额外插件，一行代码，立竿见影。
