Localhost无法显示Nuxt应用并出现503错误，如何修复？

环境信息 #

• 操作系统：Windows 11
• Node版本：v20.9.0
• Nuxt版本：3.6.1

问题描述 #

在VS Code终端执行npm run dev命令后，终端显示本地链接http://localhost:3000/及网络链接；点击链接后，Nuxt应用无法正常加载，一直停留在Nuxt默认页面；浏览器控制台报错：

加载资源失败：服务器返回503（服务不可用）状态
GET http://localhost:3001/ 503（服务不可用）

排查与解决方法 #

1. 检查端口占用 #

localhost:3001被占用或Nuxt关联服务无法在该端口启动，导致资源加载失败：

• 打开Windows命令提示符，执行netstat -ano | findstr ":3001"，查看占用3001端口的进程PID。
• 打开任务管理器，找到对应PID的进程并结束，之后重启Nuxt服务。

2. 清理Nuxt缓存 #

缓存损坏可能引发服务异常：

• 停止当前Nuxt服务，执行npx nuxi clean清理缓存。
• 重新执行npm run dev启动服务。

3. 检查Nuxt配置文件 #

确认nuxt.config.ts中是否存在配置错误：

• 检查是否指定了错误端口，或代理配置指向了不可用服务。
• 可临时注释自定义配置后重启服务，排查是否为配置问题。

4. 重新安装依赖 #

依赖版本不兼容可能导致问题：

• 删除node_modules文件夹和package-lock.json文件。
• 执行npm install重新安装依赖，再启动服务。

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