# 调试指南 - 空白页面问题

## 可能的原因和解决方案

### 1. 检查浏览器控制台
打开浏览器开发者工具（F12），查看Console标签页，看是否有JavaScript错误。

### 2. 检查网络请求
在Network标签页，查看是否有资源加载失败（红色标记）。

### 3. 检查uni-app配置
确保项目被HBuilderX识别为uni-app项目：
- `manifest.json` 存在且配置正确
- `pages.json` 存在且配置正确
- `App.vue` 存在

### 4. 尝试以下操作

#### 方法一：使用HBuilderX的标准运行方式
1. 关闭当前运行
2. 在HBuilderX中：运行 → 运行到浏览器 → Chrome
3. 不要使用命令行运行

#### 方法二：检查项目类型
确保HBuilderX识别项目类型为"uni-app项目"：
- 右键项目根目录
- 查看项目类型

#### 方法三：清除缓存
```bash
cd frontend
rm -rf node_modules/.vite
rm -rf .hbuilderx
```

#### 方法四：检查页面路由
确保 `pages.json` 中第一个页面路径正确：
```json
{
  "pages": [
    {
      "path": "pages/index/index",  // 确保这个文件存在
      ...
    }
  ]
}
```

### 5. 常见错误

#### 错误：Cannot find module 'vue'
**解决**：执行 `npm install vue pinia`

#### 错误：Failed to parse .vue files
**解决**：已安装 `@vitejs/plugin-vue`

#### 错误：空白页面
**可能原因**：
- main.js格式不正确
- App.vue缺少template
- 页面路由配置错误
- JavaScript运行时错误

### 6. 调试步骤

1. **打开浏览器控制台**（F12）
2. **查看Console错误**
3. **查看Network请求**
4. **检查页面元素**（Elements标签）
5. **提供错误信息**以便进一步排查

## 如果仍然空白

请提供以下信息：
1. 浏览器控制台的错误信息（Console标签）
2. 网络请求状态（Network标签，是否有404或500错误）
3. HBuilderX的运行日志
4. 页面源代码（右键页面 → 查看网页源代码）