项目启动后浏览器空白
页面能打开但内容为空白，这是最常见的问题之一。按以下步骤排查。
排查顺序
1. 检查控制台错误
按 F12 打开开发者工具 → Console 标签。
常见报错及原因：
| 报错信息 | 原因 | 解决 |
|---|---|---|
Unexpected token < | 语法错误 | 检查代码是否有遗漏的括号/引号 |
Cannot find module | 缺少依赖 | 执行 pnpm install |
Failed to fetch | 后端未启动 | 先启动后端服务 |
Network Error | 网络不通 | 检查端口和防火墙 |
2. 检查网络请求
切换到 Network 标签：
| 状态码 | 含义 | 操作 |
|---|---|---|
| 200 | 正常 | 问题在前端，看 Console 错误 |
| 401 | 未登录 / Token 过期 | 重新登录 |
| 404 | 接口不存在 | 检查 URL 是否正确 |
| 500 | 服务端错误 | 查看后端日志 |
| 0 (pending) | 请求挂起 | 后端响应慢或无响应 |
3. 清除缓存并重启
bash
# 删除 node_modules 和锁文件
rm -rf node_modules pnpm-lock.yaml
# 重新安装
pnpm install
# 清除 Vite 缓存
rm -rf .vitepress/.temp
# 重新启动开发服务器
pnpm dev4. 检查环境变量
确认 .env.development 或 .env 文件存在且包含必要配置：
bash
# 必须有
VITE_APP_API_BASE_URL=http://localhost:80805. 常见原因速查
| 原因 | 症状 | 解决 |
|---|---|---|
| Node 版本过低 | 启动报错 | 升级到 16+ |
| 端口被占用 | EADDRINUSE | 更换端口或关闭占用进程 |
| ESLint 严重警告 | 编译中断 | 修复错误或暂时禁用 |
| 代理软件干扰 | Network Error | 关闭 VPN/代理 |
| Windows 路径过长 | 编译失败 | 尝量缩短路径 |
6. 浏览器兼容性
| 浏览器 | 最低版本 |
|---|---|
| Chrome | 最新版推荐 |
| Edge | Chromium 内核 |
| Firefox | 90+ |
| Safari | 14+ |
💡 提示：IE 不支持本项目，请勿使用。