| 1 | # 启动前端 |
| 2 | |
| 3 | 启动 Next.js 前端服务。 |
| 4 | |
| 5 | ## 检查是否已运行 |
| 6 | |
| 7 | ```bash |
| 8 | # 推荐（检查服务响应） |
| 9 | curl -s http://localhost:3000 > /dev/null 2>&1 && echo "前端运行中" || echo "前端未运行" |
| 10 | ``` |
| 11 | |
| 12 | ## 首次启动（需要 build） |
| 13 | |
| 14 | ```bash |
| 15 | cd video-claw/frontend |
| 16 | npm run build |
| 17 | npm start |
| 18 | ``` |
| 19 | |
| 20 | ## 后续启动 |
| 21 | |
| 22 | ```bash |
| 23 | cd video-claw/frontend |
| 24 | npm start |
| 25 | ``` |
| 26 | |
| 27 | ## 验证 |
| 28 | |
| 29 | ```bash |
| 30 | curl http://localhost:3000 |
| 31 | ``` |
| 32 | |
| 33 | ## 启动后等待 |
| 34 | |
| 35 | ⚠️ **重要**：前端启动需要时间，启动后必须等待 **5 秒** 再访问页面，否则可能出现空白页面。 |
| 36 | |
| 37 | ```bash |
| 38 | sleep 5 |
| 39 | # 然后再访问 http://localhost:3000 |
| 40 | ``` |
| 41 | |
| 42 | ## 常见问题 |
| 43 | |
| 44 | | 错误 | 原因 | 解决方法 | |
| 45 | |------|------|----------| |
| 46 | | `command not found: lsof` | lsof 命令不存在 | 使用备用检查方式 `curl http://localhost:3000` | |
| 47 | | `前端未运行` | 服务未启动 | 执行启动命令 | |
| 48 | | `Address already in use` | 端口被占用 | `lsof -ti :3000 \| xargs kill` | |
| 49 | | `npm: command not found` | Node.js 未安装 | 安装 Node.js | |
| 50 | | `Error: Could not find or load config file` | .next 目录损坏 | 删除 .next 目录后重新 `npm run build` | |
| 51 | | 白屏/空白页面 | build 缓存问题 | `rm -rf .next && npm run build` | |
| 52 | |
| 53 | ## 注意事项 |
| 54 | |
| 55 | - 前端端口：`3000` |
| 56 | - **必须确保前端运行后才能给用户 Web 界面链接** |
| 57 | - 建议使用生产模式 `npm start`，开发模式可用 `npm run dev` |
| 58 |