Files
medical-mall/pages/mall/admin/docs/SYSTEM_INFO_FIX_GUIDE.md
2026-02-03 21:35:57 +08:00

3.6 KiB
Raw Blame History

System-Info 页面侧边栏问题完整解决方案

问题现象

  • refresh-cache.uvue、online-upgrade.uvue、system-log.uvue 添加 AdminLayout 导入后工作正常
  • system-info.uvue 添加相同的导入后仍然没有侧边栏
  • 浏览器控制台显示 "Failed to resolve component: AdminLayout"

问题分析

1. 已确认正确的部分

  • nav.uts 匹配逻辑正确(通过测试脚本验证)
  • menu.uts 中 system-info 配置正确
  • AdminLayout.uvue 逻辑正确
  • tsconfig.json 中 @ 别名配置正确
  • pages.json 中路由配置正确

2. 可能的原因

原因 1: 浏览器缓存

H5 开发时,浏览器可能缓存了旧版本的 system-info.uvue

原因 2: HBuilderX/vite 编译缓存

编译器可能缓存了有问题的版本

原因 3: 文件编码或隐藏字符

system-info.uvue 可能有不可见的特殊字符导致解析失败

原因 4: 热更新问题

开发服务器的热更新可能没有正确处理这个文件

完整解决步骤

步骤 1: 清理缓存

# 在项目根目录执行
Remove-Item -Recurse -Force unpackage\dist -ErrorAction SilentlyContinue
Remove-Item -Recurse -Force .hbuilderx\cache -ErrorAction SilentlyContinue
Remove-Item -Recurse -Force node_modules\.vite -ErrorAction SilentlyContinue

步骤 2: 重新构建 system-info.uvue

完全删除并重新创建文件,确保没有隐藏字符

步骤 3: 验证文件内容

使用以下命令检查文件编码:

Get-Content "d:\骅锋\mall\pages\mall\admin\maintain\system-info.uvue" -Encoding UTF8 | Measure-Object -Line

步骤 4: 重启开发服务器

  1. 停止当前的 dev:h5 进程Ctrl+C
  2. 清理浏览器缓存Ctrl+Shift+Delete
  3. 重新启动: npm run dev:h5

步骤 5: 强制刷新浏览器

访问 system-info 页面时使用 Ctrl+Shift+R 强制刷新

备用方案

如果上述步骤无效,尝试以下方案:

方案 A: 使用相对路径导入

将 system-info.uvue 中的导入改为:

import AdminLayout from "../../../layouts/admin/AdminLayout.uvue";

方案 B: 检查文件名大小写

确保文件名完全匹配(包括大小写):

  • 文件: system-info.uvue
  • menu.uts: id: 'system-info'
  • currentPage: "system-info"

方案 C: 使用其他工作文件作为模板

复制 refresh-cache.uvue 的内容,只修改必要的部分:

Copy-Item "d:\骅锋\mall\pages\mall\admin\maintain\security\refresh-cache.uvue" "d:\骅锋\mall\pages\mall\admin\maintain\system-info-new.uvue"
# 然后手动修改 system-info-new.uvue 的内容
# 测试通过后重命名回 system-info.uvue

调试工具

浏览器控制台诊断脚本

在浏览器控制台运行 d:\骅锋\mall\debug-system-info-browser.js 的内容

Node.js 测试脚本

node "d:\骅锋\mall\test-system-info-nav.js"

预期结果

修复后,访问 system-info 页面应该:

  1. 显示主侧边栏("维护"菜单高亮)
  2. 显示二级侧边栏(包含"系统信息"等子菜单)
  3. 面包屑显示:维护 / 系统信息
  4. 没有 "Failed to resolve component: AdminLayout" 错误

验证清单

  • 浏览器控制台无错误
  • Vue DevTools 中能看到 AdminLayout 组件
  • 主侧边栏显示且 "维护" 高亮
  • 二级侧边栏显示
  • 面包屑正确显示
  • 页面内容正常渲染

相关文件

  • 页面文件: pages/mall/admin/maintain/system-info.uvue
  • 布局组件: layouts/admin/AdminLayout.uvue
  • 导航逻辑: layouts/admin/utils/nav.uts
  • 菜单配置: layouts/admin/utils/menu.uts
  • 路由配置: pages.json (line 604)