为什么 Vite 启动后修改 React 组件不热更新？

景源 Dev 提问于 2026-03-07 22:02:20 阅读 2

前端

我用 Vite 搭了个 React 项目，但改完组件代码保存后页面没自动刷新，得手动 F5 才能看到变化。控制台也没报错，HMR 日志看着正常。是不是哪里配置错了？

我的组件写法如下：

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>
        count is {count}
      </button>
    </div>
  );
}

试过删 node_modules 重装依赖、换浏览器，都不行。Vite 版本是 5.2.x，React 插件也装了，到底卡在哪了？

我来解答赞 0 收藏

反馈

1 条解答

程序员书圻 Lv1

啊这个HMR问题我也遇到过！看起来你的组件代码本身没问题，可能是配置上的小问题。我最近刚好解决过类似的坑。

首先确认下你的vite.config.js里是不是有react插件，我的做法是这样的：

import { defineConfig } from 'vite'

import react from '@vitejs/plugin-react'



export default defineConfig({

  plugins: [react()]

})

如果配置没问题的话，试试这几个地方：
1. 确保你的组件文件名是.jsx或者.tsx，不能是.js（虽然vite支持但容易出幺蛾子）
2. 检查下浏览器控制台的network标签，看看hmr请求是不是真的发出来了
3. 最玄学的一招：在vite.config.js里加个server配置，我之前就是这么救活的：

server: {

  hmr: {

    overlay: false

  }

}

还有个小细节，如果你用了某些奇怪的代理工具或者公司内网，可能会干扰websocket连接。我之前就被charles坑过，关掉就好了。

实在不行的话...虽然很蠢但确实有用：试试换个端口启动，有时候3000端口会被其他东西占用导致hmr失效。用 vite --port 5173 这样换个端口试试。

2026-03-07 22:03