ai-admin/admin-frontend/DEBUG_BLANK_PAGE.md

空白页面故障排除指南

🔧 已修复的问题

1. Vue Router History模式问题 ✅

问题: 静态文件服务器不支持HTML5 History模式 解决方案: 生产环境自动切换到Hash模式

// 修复前
history: createWebHistory(import.meta.env.BASE_URL)

// 修复后  
history: import.meta.env.PROD ? createWebHashHistory() : createWebHistory()

2. 资源路径问题 ✅

问题: 绝对路径导致资源加载失败 解决方案: 使用相对路径构建

// vite.config.ts
base: './'  // 使用相对路径

🚀 测试步骤

1. 构建并预览

npm run build:prod
npm run preview

访问: http://localhost:4173

2. Live Server测试

1. 右键 dist/index.html
2. 选择 "Open with Live Server"
3. 应该看到登录页面而不是空白页

3. 静态服务器测试

cd dist
python -m http.server 8080
# 访问: http://localhost:8080

🔍 调试方法

查看浏览器控制台

1. 打开开发者工具 (F12)
2. 查看Console标签是否有错误
3. 查看Network标签确认资源加载

常见错误类型

• 404错误: 资源路径问题
• CORS错误: API跨域问题
• JavaScript错误: 代码逻辑问题
• 路由错误: Vue Router配置问题

🌐 不同环境的URL格式

开发环境 (History模式)

http://localhost:3000/
http://localhost:3000/login
http://localhost:3000/dashboard

生产环境 (Hash模式)

http://localhost:4173/
http://localhost:4173/#/login
http://localhost:4173/#/dashboard

📋 检查清单

✅ 资源加载检查

• HTML文件使用相对路径 ./assets/
• CSS文件正常加载
• JavaScript文件正常加载
• 无404错误

✅ Vue应用检查

• <div id="app"> 存在
• Vue实例正常挂载
• 路由系统正常工作
• 组件正常渲染

✅ API连接检查

• 后端服务正常运行
• API地址配置正确
• CORS策略配置正确
• 网络连接正常

🔧 高级调试

检查构建产物

# 检查HTML文件内容
cat dist/index.html

# 检查是否使用相对路径
grep -o '\./assets' dist/index.html

# 检查JavaScript文件大小
ls -lh dist/assets/*.js

手动测试步骤

1. 在浏览器中访问 http://localhost:4173
2. 检查是否自动重定向到 #/login
3. 查看登录表单是否正常显示
4. 测试登录功能是否可用

⚠️ 注意事项

1. Hash模式影响: URL会包含 # 符号
2. SEO影响: Hash模式对SEO不友好
3. API调用: 确保API地址在生产环境中正确
4. 缓存问题: 浏览器可能缓存旧版本，尝试硬刷新

现在应用应该可以正常显示了！如果仍有问题，请检查浏览器控制台的具体错误信息。