website/TROUBLESHOOTING.md

新闻数据显示问题排查指南

🔍 问题症状

访问 http://192.168.1.83:5175/website/industry-news 仍然只显示降级数据（1条系统提示）

✅ 已确认正常的部分

1. ✅ 真实数据文件存在：public/data/news.json (20条新闻)
2. ✅ HTTP服务可访问：curl http://192.168.1.83:5175/website/data/news.json 返回20条真实新闻
3. ✅ 数据格式正确：JSON结构完整，所有字段都存在
4. ✅ 服务器运行正常：端口5175正常响应
5. ✅ 代码已更新：newsService.ts 使用了 import.meta.env.BASE_URL 构造正确的URL

🐛 可能的原因

1. 浏览器缓存（最可能）

症状：刷新页面仍显示旧数据 原因：浏览器缓存了旧的降级数据或旧的代码

解决方法：

# 方法1: 硬刷新（强烈推荐）
在浏览器中按：
- Chrome/Edge: Ctrl+Shift+R (Windows) 或 Cmd+Shift+R (Mac)
- Firefox: Ctrl+F5 (Windows) 或 Cmd+Shift+R (Mac)
- Safari: Cmd+Option+R

# 方法2: 清除缓存
1. 打开浏览器开发者工具 (F12)
2. 右键点击刷新按钮
3. 选择"清空缓存并硬性重新加载"

# 方法3: 无痕模式
使用无痕/隐私浏览模式打开页面

2. 应用内缓存（5分钟）

症状：5分钟内数据不更新 原因：newsService.ts 中设置了 CACHE_DURATION = 5 * 60 * 1000

解决方法：

# 等待5分钟后再刷新
# 或者临时修改缓存时间为0

3. Service Worker缓存

症状：即使硬刷新也显示旧数据 原因：如果应用注册了Service Worker，可能缓存了旧资源

解决方法：

# 在浏览器开发者工具中:
1. 打开 Application 标签
2. 左侧选择 Service Workers
3. 点击 Unregister 注销所有 Service Worker
4. 刷新页面

4. React组件未重新渲染

症状：数据已加载但页面未更新

检查方法：

# 打开浏览器控制台 (F12)
# 查看是否有以下日志：
✅ Loaded real news data from crawler: 20 items

# 如果没有，查看是否有错误日志

🧪 验证步骤

Step 1: 验证数据可访问性

# 在浏览器中直接访问数据文件
http://192.168.1.83:5175/website/data/news.json

# 应该看到20条新闻的JSON数据
# 检查第一条新闻的标题是否包含 "Medical device coatings"

Step 2: 检查浏览器控制台

# 打开开发者工具 (F12)
# 查看 Console 标签
# 应该看到：
🔍 Attempting to load news from: /website/data/news.json
📡 Response status: 200 true
✅ Loaded real news data from crawler: 20 items

# 如果看到：
📦 Using fallback news data
# 说明数据加载失败，需要检查网络请求

Step 3: 检查网络请求

# 在开发者工具中打开 Network 标签
# 刷新页面 (Ctrl+R)
# 查找 news.json 请求
# 检查：
  - Status: 应该是 200
  - Response: 应该包含20条新闻
  - Size: 应该是 ~23KB

Step 4: 完全清除缓存

# 如果以上都不行，尝试：
1. 关闭所有浏览器窗口
2. 清除浏览器所有缓存（设置 -> 隐私 -> 清除浏览数据）
3. 重新打开浏览器
4. 访问 http://192.168.1.83:5175/website/industry-news

🛠️ 调试命令

验证服务器状态

# 检查文件存在
ls -la /Users/brunogao/work/codes/web/omniverse-website/public/data/news.json

# 验证数据内容
/Users/brunogao/work/codes/web/omniverse-website/verify-news.sh

# 测试HTTP访问
curl -s 'http://192.168.1.83:5175/website/data/news.json' | jq 'length'
# 应该输出: 20

查看服务器日志

# 开发服务器应该运行在端口5175
# 检查是否有任何错误日志

重启开发服务器

# 如果怀疑服务器问题，重启服务器：
# 1. 停止当前服务器 (Ctrl+C)
# 2. 重新运行
cd /Users/brunogao/work/codes/web/omniverse-website
npm run dev

✅ 成功标志

当问题解决后，您应该看到：

浏览器界面

• 新闻列表显示20条真实新闻
• 第一条新闻标题: "Medical device coatings specialist expanding capabilities"
• 新闻来源: "MedTech Dive" 或 "Medical Device Network"
• 没有 "系统降级数据" 或 "新闻数据正在加载中" 的提示

浏览器控制台

🔍 Attempting to load news from: /website/data/news.json
📡 Response status: 200 true
✅ Loaded real news data from crawler: 20 items

Network 标签

• news.json 请求状态: 200
• Response 大小: ~23KB
• Response 内容: 20条新闻的JSON数组

📞 如果仍然无法解决

收集信息

1. 浏览器控制台的完整日志（Console标签）
2. Network标签中 news.json 请求的详细信息
3. 浏览器类型和版本
4. 是否使用了代理或VPN

临时解决方案

如果需要快速验证功能，可以：

1. 使用无痕模式
2. 尝试不同的浏览器（Chrome、Firefox、Safari）
3. 使用手机浏览器访问
4. 直接访问数据URL验证: http://192.168.1.83:5175/website/data/news.json

🔄 最后的尝试

如果所有方法都失败，执行完全重置：

cd /Users/brunogao/work/codes/web/omniverse-website

# 1. 停止所有开发服务器
# (Ctrl+C 或 kill相关进程)

# 2. 清除node_modules和重新安装
rm -rf node_modules
npm install

# 3. 清除Vite缓存
rm -rf node_modules/.vite

# 4. 重新运行爬虫
cd scripts
npm install
npm run crawl
cd ..

# 5. 验证数据
./verify-news.sh

# 6. 重启开发服务器
npm run dev

# 7. 使用无痕模式访问
# http://192.168.1.83:5175/website/industry-news

---

记住最重要的一步: 🔄 硬刷新浏览器 (Ctrl+Shift+R 或 Cmd+Shift+R)

90%的问题都是浏览器缓存导致的！