Nuxt3运行无报错但页面加载停滞、HMR失效求助

环境信息 #

• 设备：iMac
• 系统：macOS Catalina
• Node版本：v16.17.1
• Nuxt版本：3.0.0
• 浏览器：Firefox

问题现象 #

通过以下命令搭建Nuxt3应用后：

npx nuxi init mynuxt
cd mynuxt
npm install
npm run dev

终端显示服务正常启动：

Nuxi 3.0.0 15:04:45
Nuxt 3.0.0 with Nitro 1.0.0 15:04:45

> Local: http://localhost:3000/
> Network: http://192.168.1.104:3000/

✔ Nitro built in 3519 ms 15:04:59
ℹ Vite client warmed up in 6771ms 15:04:59

但Firefox访问http://localhost:3000/时持续加载无内容；偶尔多次保存nuxt.config.ts并刷新浏览器后能显示欢迎页，但热模块替换（HMR）失效，修改文件后页面无更新。单独使用npm create vite@latest搭建Vue应用无异常。

解决方法 #

1. 调整Firefox网络与缓存设置 #

• 关闭代理：进入「设置 -> 常规 -> 网络设置」，选择「自动检测代理设置」或「不使用代理」，避免代理拦截本地请求。
• 清除缓存：按Cmd+Shift+Delete勾选缓存相关选项后清除，重启浏览器再访问。

2. 配置Nuxt强制指定HMR端口 #

在nuxt.config.ts中添加Vite的HMR配置，避免端口冲突或连接异常：

export default defineNuxtConfig({
  vite: {
    server: {
      hmr: {
        port: 24678, // 指定未被占用的端口
        clientPort: 24678
      }
    }
  }
})

保存配置后重启npm run dev测试HMR效果。

3. 调整Nuxt或Node版本 #

• 升级Nuxt到最新稳定版：

  npm install nuxt@latest nitro@latest
  

• 降级Node到16.x LTS版本（如16.16.0），用nvm管理版本：

  nvm install 16.16.0
  nvm use 16.16.0
  

  重新安装依赖并启动服务。

4. 临时关闭Firefox隐私增强功能 #

进入「设置 -> 隐私与安全」，关闭「增强型跟踪保护」，部分隐私规则可能阻止HMR的WebSocket连接，导致热更新失效。

5. 检查端口占用情况 #

确认3000端口及HMR指定端口未被占用：

lsof -i :3000
lsof -i :24678

如有占用，关闭对应进程后重启Nuxt服务。

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