998211c483
- 从服务器拉取完整代码 - 按框架规范整理项目结构 - 配置 Drone CI 测试环境部署 - 包含后端(FastAPI)、前端(Vue3)、管理端 技术栈: Vue3 + TypeScript + FastAPI + MySQL
183 lines
4.4 KiB
Markdown
183 lines
4.4 KiB
Markdown
# 清除浏览器缓存以应用前端修复
|
||
|
||
## 问题现象
|
||
即使前端代码已修复并重启容器，浏览器仍然使用旧版本的JavaScript代码，导致：
|
||
- 文件上传失败
|
||
- material_id不存在的404错误
|
||
- AI分析无法启动
|
||
|
||
## 解决方案
|
||
|
||
### 方案1：硬刷新页面（推荐）⭐
|
||
|
||
**Windows/Linux**:
|
||
```
|
||
Ctrl + Shift + R
|
||
或
|
||
Ctrl + F5
|
||
```
|
||
|
||
**Mac**:
|
||
```
|
||
Cmd + Shift + R
|
||
或
|
||
Cmd + Option + R
|
||
```
|
||
|
||
这会强制浏览器重新下载所有资源，包括JavaScript文件。
|
||
|
||
### 方案2：清除浏览器缓存
|
||
|
||
#### Chrome/Edge
|
||
1. 按 `Ctrl + Shift + Delete` (Mac: `Cmd + Shift + Delete`)
|
||
2. 选择"时间范围"：**最近1小时**
|
||
3. 勾选：
|
||
- ✅ **缓存的图片和文件**
|
||
- ✅ Cookie和其他网站数据（可选）
|
||
4. 点击"清除数据"
|
||
|
||
#### Firefox
|
||
1. 按 `Ctrl + Shift + Delete` (Mac: `Cmd + Shift + Delete`)
|
||
2. 选择"时间范围"：**最近1小时**
|
||
3. 勾选：
|
||
- ✅ **缓存**
|
||
- ✅ Cookie（可选）
|
||
4. 点击"立即清除"
|
||
|
||
### 方案3：禁用缓存（开发模式）
|
||
|
||
**仅在开发测试时使用**
|
||
|
||
1. 打开开发者工具 (F12)
|
||
2. 切换到 **Network** 标签
|
||
3. 勾选 **Disable cache**
|
||
4. 保持开发者工具打开状态
|
||
5. 刷新页面
|
||
|
||
### 方案4：无痕/隐私模式
|
||
|
||
**Chrome/Edge**: `Ctrl + Shift + N` (Mac: `Cmd + Shift + N`)
|
||
**Firefox**: `Ctrl + Shift + P` (Mac: `Cmd + Shift + P`)
|
||
|
||
在无痕模式下访问：
|
||
```
|
||
https://aiedu.ireborn.com.cn/manager/courses/1/edit
|
||
```
|
||
|
||
## 验证修复是否生效
|
||
|
||
### 1. 检查浏览器控制台
|
||
|
||
打开开发者工具 (F12)，在 **Console** 中查看：
|
||
|
||
**修复前（错误）**:
|
||
```javascript
|
||
文件上传响应: {file_url: '/static/uploads/...', file_type: 'pdf', ...}
|
||
// 缺少 code 字段！
|
||
```
|
||
|
||
**修复后（正确）**:
|
||
```javascript
|
||
文件上传响应: {code: 200, data: {file_url: '/static/uploads/...', ...}}
|
||
// 有 code 字段！
|
||
```
|
||
|
||
### 2. 检查Network标签
|
||
|
||
1. 打开开发者工具 (F12)
|
||
2. 切换到 **Network** 标签
|
||
3. 刷新页面 (F5)
|
||
4. 查找 `http.*.js` 文件
|
||
5. 查看 **Size** 列：
|
||
- 如果显示 `(memory cache)` 或 `(disk cache)` → **使用了缓存**
|
||
- 如果显示实际大小（如 `156 kB`）→ **重新下载了**
|
||
|
||
### 3. 测试上传功能
|
||
|
||
1. 访问编辑课程页面
|
||
2. 点击"上传资料"
|
||
3. 选择一个文件并上传
|
||
4. 观察浏览器控制台输出：
|
||
|
||
**正确的输出顺序**:
|
||
```javascript
|
||
开始上传文件: xxx.pdf 大小: 1234567
|
||
文件上传响应: {code: 200, data: {...}} ← 有code字段
|
||
准备创建资料记录: {name: 'xxx.pdf', ...}
|
||
创建资料记录响应: {code: 200, data: {id: 34, ...}} ← 真实ID
|
||
自动启动AI知识点分析: 34 xxx.pdf
|
||
```
|
||
|
||
5. **刷新页面** - 文件应该仍然存在 ✅
|
||
|
||
## 常见问题
|
||
|
||
### Q1: 硬刷新后仍然有问题？
|
||
**A**: 尝试完全清除缓存（方案2），然后关闭并重新打开浏览器。
|
||
|
||
### Q2: 清除缓存后需要重新登录吗？
|
||
**A**: 如果清除了Cookie，需要重新登录。建议只清除"缓存的图片和文件"，不清除Cookie。
|
||
|
||
### Q3: 无痕模式下可以正常使用，但正常模式不行？
|
||
**A**: 这确认了是缓存问题。在正常模式下清除缓存即可。
|
||
|
||
### Q4: 如何确认使用的是最新版本的代码？
|
||
**A**:
|
||
1. 打开开发者工具 → Sources 标签
|
||
2. 找到 `http.ts` 文件
|
||
3. 搜索 `upload` 方法
|
||
4. 检查第392行是否**没有** `.then((response) => response.data)`
|
||
5. 如果还有这行代码，说明缓存未清除
|
||
|
||
## 预防措施
|
||
|
||
### 1. 开发环境配置
|
||
|
||
在 `vite.config.ts` 中添加：
|
||
```typescript
|
||
export default defineConfig({
|
||
server: {
|
||
headers: {
|
||
'Cache-Control': 'no-cache, no-store, must-revalidate',
|
||
'Pragma': 'no-cache',
|
||
'Expires': '0'
|
||
}
|
||
}
|
||
})
|
||
```
|
||
|
||
### 2. 版本号管理
|
||
|
||
在HTML中添加版本查询参数：
|
||
```html
|
||
<script src="/main.js?v=20251017"></script>
|
||
```
|
||
|
||
### 3. Service Worker清理
|
||
|
||
如果项目使用了Service Worker，需要额外清理：
|
||
```javascript
|
||
// 在浏览器控制台执行
|
||
navigator.serviceWorker.getRegistrations().then(function(registrations) {
|
||
for(let registration of registrations) {
|
||
registration.unregister();
|
||
}
|
||
});
|
||
```
|
||
|
||
## 快速操作清单
|
||
|
||
□ 硬刷新页面 (`Ctrl + Shift + R`)
|
||
□ 打开开发者工具 (F12)
|
||
□ 检查Console输出是否有 `code: 200`
|
||
□ 测试上传文件
|
||
□ 刷新页面验证文件是否仍存在
|
||
□ 如果仍有问题，完全清除缓存
|
||
□ 关闭并重新打开浏览器
|
||
|
||
---
|
||
|
||
**最后更新**: 2025-10-17
|
||
**相关文档**: `/root/aiedu/文件上传和AI分析问题修复报告.md`
|
||
|