6.1 KiB

Raw Permalink Blame History

前端错误排查指南

当前错误分析

您遇到的错误包括：

1. 404错误 - 头像图片找不到

GET http://123.56.98.4:8080/dev-api/profile/avatar/2025/08/01/avatar_20250801085429A353.png 404

原因：用户头像文件不存在或路径错误

影响：不影响功能，只是头像显示不出来

解决方案：

这是正常现象，如果用户没有上传头像或头像文件被删除
可以忽略此错误，或者重新上传头像

2. WebSocket连接失败

GET http://172.17.164.32:8080/sockjs-node/info?t=... net::ERR_CONNECTION_TIMED_OUT
[WDS] Disconnected!

原因：Webpack开发服务器的热重载(HMR)连接失败

影响：热重载功能不可用，需要手动刷新页面才能看到代码更改

解决方案：

检查防火墙设置
检查网络连接
重启开发服务器
如果不需要热重载，可以忽略此错误

3. ChunkLoadError - JavaScript代码块加载失败 ⚠️

ChunkLoadError: Loading chunk 0 failed.(timeout: http://123.56.98.4:8080/static/js/0.js)

原因：

浏览器缓存问题
网络连接问题
构建文件损坏
代理配置问题

影响：页面无法正常加载，功能不可用

这是主要问题，需要解决！

解决方案

方案1：清除缓存并重新构建（推荐）⭐

# 1. 停止前端服务 (Ctrl+C)

# 2. 进入前端目录
cd ruoyi-fastapi-frontend

# 3. 清除缓存和构建文件
rm -rf node_modules
rm -rf dist
rm -rf .cache

# Windows用户使用：
# rmdir /s /q node_modules
# rmdir /s /q dist
# rmdir /s /q .cache

# 4. 重新安装依赖
npm install

# 5. 重新启动开发服务器
npm run dev

方案2：强制刷新浏览器

清空缓存并硬性重新加载
- 打开浏览器开发者工具（F12）
- 右键点击刷新按钮
- 选择"清空缓存并硬性重新加载"
清除浏览器缓存
- 按 Ctrl + Shift + Delete
- 选择"缓存的图片和文件"
- 点击"清除数据"
强制刷新
- 按 Ctrl + F5（Windows）
- 或 Cmd + Shift + R（Mac）

方案3：检查网络和代理配置

检查后端服务是否运行

# 检查后端是否在9099端口运行
curl http://127.0.0.1:9099

# 或者在浏览器访问
http://127.0.0.1:9099

检查代理配置

确保 vue.config.js 中的代理配置正确：

proxy: {
  [process.env.VUE_APP_BASE_API]: {
    target: `http://127.0.0.1:9099`,  // 确保这是正确的后端地址
    changeOrigin: true,
    pathRewrite: {
      ['^' + process.env.VUE_APP_BASE_API]: ''
    }
  }
}

方案4：重启开发服务器

# 1. 停止当前服务 (Ctrl+C)

# 2. 等待几秒

# 3. 重新启动
npm run dev

方案5：使用无缓存模式启动浏览器

Chrome/Edge

# Windows
chrome.exe --disable-cache --disable-application-cache

# Mac
open -a "Google Chrome" --args --disable-cache

Firefox

# 在地址栏输入
about:config

# 搜索并设置
browser.cache.disk.enable = false
browser.cache.memory.enable = false

预防措施

1. 定期清理缓存

# 每周执行一次
cd ruoyi-fastapi-frontend
rm -rf node_modules/.cache
rm -rf dist

2. 使用版本控制

确保代码在Git中有备份：

git status
git add .
git commit -m "添加批量添加样品功能"

3. 检查依赖版本

# 检查过时的依赖
npm outdated

# 更新依赖（谨慎操作）
npm update

4. 使用稳定的网络环境

避免使用不稳定的WiFi
使用有线网络
检查防火墙设置

验证修复

修复后，请验证以下功能：

1. 基本功能

✅ 页面能正常加载
✅ 登录功能正常
✅ 菜单导航正常

2. 入库单功能

✅ 入库单列表能正常显示
✅ 新增入库单对话框能打开
✅ 批量添加样品功能可用

3. 对话框功能

✅ 点击对话框外部不会关闭
✅ 点击关闭按钮能正常关闭
✅ 点击取消按钮能正常关闭

常见问题FAQ

Q1: 为什么会出现ChunkLoadError？

A: 主要原因：

浏览器缓存了旧版本的代码
网络连接不稳定
构建文件损坏
代理配置错误

Q2: 清除缓存会丢失数据吗？

A: 不会。清除的是：

浏览器缓存（临时文件）
node_modules（可重新安装）
构建文件（可重新生成）

不会影响：

数据库数据
源代码文件
配置文件

Q3: 为什么WebSocket连接失败？

A: 可能原因：

防火墙阻止了连接
网络配置问题
开发服务器配置问题

影响：只影响热重载功能，不影响应用本身

Q4: 404错误需要处理吗？

A: 取决于具体情况：

头像404：可以忽略，或重新上传头像
API 404：需要检查后端服务和路由配置
静态资源404：需要检查文件路径

Q5: 如何避免这些问题？

A: 最佳实践：

定期清理缓存
使用稳定的网络
及时更新依赖
使用版本控制
做好代码备份

紧急恢复

如果以上方法都不行，可以尝试：

1. 重新克隆项目

# 备份当前修改
git stash

# 重新克隆
git clone <repository-url>
cd <project-name>

# 恢复修改
git stash pop

# 安装依赖
npm install

# 启动
npm run dev

2. 使用生产构建

# 构建生产版本
npm run build:prod

# 使用静态服务器运行
npx serve -s dist

3. 联系技术支持

如果问题持续存在，请提供：

完整的错误日志
浏览器版本
Node.js版本
操作系统版本
网络环境信息

总结

当前遇到的错误主要是：

❌ ChunkLoadError - 需要立即解决
⚠️ WebSocket连接失败 - 可以暂时忽略
ℹ️ 头像404 - 不影响功能

推荐操作顺序：

清除浏览器缓存并强制刷新
如果不行，重新构建项目
如果还不行，检查网络和代理配置
最后考虑重新克隆项目

重要提示：这些错误与我们添加的"批量添加样品"功能无关，是前端开发环境的常见问题。

6.1 KiB Raw Permalink Blame History Unescape Escape