Nuxt3 HMR不生效，需手动刷新页面触发热更新问题求助

问题场景 #

执行以下步骤安装并运行Nuxt3：

npx nuxi init <project-name>
cd <project-name>
npm i
npm run dev

控制台正常输出启动信息：

Nuxi 3.0.0                                                                                                                                                                                                                                                    09:52:01
Nuxt 3.0.0 with Nitro 1.0.0                                                                                                                                                                                                                                   09:52:01
                                                                                                                                                                                                                                                              09:52:01
  > Local:    http://localhost:3000/ 
  > Network:  http://172.17.181.194:3000/

✔ Nitro built in 374 ms                                                                                                                                                                                                                                 nitro 09:52:03
ℹ Vite client warmed up in 1341ms                                                                                                                                                                                                                             09:52:03

但修改app.vue并保存后，页面无任何变化；手动刷新Chrome后，控制台才显示HMR触发日志：✔ Vite server hmr 6 files in 20.051ms 09:52:30，页面才更新。测试Node v18.3.0和v16.15.1版本，问题均存在。

解决方法 #

• 检查浏览器控制台报错：打开Chrome开发者工具（F12）的Console面板，查看是否有WebSocket连接失败、资源加载错误等信息。HMR依赖WebSocket实现实时通信，连接失败会直接导致自动刷新失效。

• 配置Vite HMR参数：在项目根目录的nuxt.config.ts中添加HMR相关配置，强制指定本地主机和端口：

export default defineNuxtConfig({
  vite: {
    server: {
      hmr: {
        host: 'localhost',
        port: 24678 // 可替换为未被占用的自定义端口
      }
    }
  }
})

保存配置后重启npm run dev，测试文件修改是否触发自动刷新。

• 禁用浏览器缓存：在Chrome开发者工具的Network面板中，勾选「Disable cache」选项（需保持开发者工具处于打开状态），避免浏览器缓存旧资源导致HMR更新不生效。

• 清理依赖与缓存后重装：执行以下命令清理项目缓存和依赖，重新安装后重启服务：

rm -rf node_modules .nuxt .output
npm cache clean --force
npm install

• 排查浏览器扩展干扰：暂时禁用Chrome的所有扩展程序（如广告拦截器、代理工具等），部分扩展可能会拦截WebSocket连接，导致HMR无法正常工作。

内容的提问来源于stack exchange，提问作者Matyas Zednicek