diff --git a/pages/mall/admin/docs/UNI_APP_X_PAGE_FIX_GUIDE.md b/pages/mall/admin/docs/UNI_APP_X_PAGE_FIX_GUIDE.md index 9ab84092..cc0f292b 100644 --- a/pages/mall/admin/docs/UNI_APP_X_PAGE_FIX_GUIDE.md +++ b/pages/mall/admin/docs/UNI_APP_X_PAGE_FIX_GUIDE.md @@ -2025,6 +2025,50 @@ const iconMap: Record = { 3. **避免深色背景块**:在配置表单内部,尽量避免使用深灰色(如 `#f6f8fb`)背景块,改用白色背景加浅灰色细边框 (`1px solid #f0f0f0`),使整体视觉更加通透一致。 4. **内部列间距对齐**:左边栏(MenuSide)、中预览(PhonePreview)、右配置(Settings)的内部 Padding 应维持在 30px-40px 左右,确保内容呼吸感一致。 +### 原因二十七:首屏加载资源请求暴增 (Dev Mode Requests Spike) + +**问题描述:** +浏览器 Network 面板显示瞬间 500+ 个 JS/Vue 文件请求,页面加载由于 Pending 状态卡顿。 + +**原因分析:** + +- **Vite 开发机制**:在 HBuilderX 的开发模式下,Vite 采用原生 ESM 加载,不进行文件合并。每一个 `.uvue`、`.uts`、脚本、样式都是独立的 HTTP 请求。 +- **依赖引用过深**:首屏主页面引用了全量的公共样式或未优化的重型组件。 + +**解决方案:** + +1. **构建验证**:明确 500+ 请求是“开发环境”特有现象。上线前执行 `npm run build`,Vite 会自动将这些文件合并为极少数的 Chunk。 +2. **样式按需导入**:避免在 `App.uvue` 中全局导入仅管理端使用的重型 CSS,改为在 `AdminLayout.uvue` 或具体子包中局部导入。 + +### 原因二十八:路由冗余导致 H5 启动缓慢 (Pages.json 优化与分包) + +**问题描述:** +`pages` 数组过大,导致 H5 下打包的入口主体体积过载,白屏时间长。 + +**解决方案:** + +1. **分包化重构 (subPackages)**:将所有 Admin 管理页面按业务域(如 `admin/order`、`admin/product`)由主包 `pages` 移入 `subPackages`。 +2. **首页最小化**:调整 `pages.json` 顺序,确保应用启动首屏(如 `login.uvue`)位于主包且依赖最少。 + +### 原因二十九:Mock 模式下的认证后门与状态同步 (Auth Bypass) + +**问题描述:** +本地调试时,由于 Supabase Session 过期或网络不通导致无法进入管理后台,且登录逻辑复杂时难以快速验证 UI。 + +**解决方案:** + +1. **Admin Backdoor**:在 `login.uvue` 实现中加入 `admin/admin` 静态验证逻辑,直接操作 `store.uts` 的状态,绕过网络请求。 +2. **状态注入规范**:手动登录成功后,必须显式调用 `setIsLoggedIn(true)` 和 `setUserProfile(adminProfile)`,否则会触发响应式布局逻辑失效。 +3. **依赖引用补全**:在 `script setup` 中必须显式 `import { setIsLoggedIn, setUserProfile } from '@/utils/store.uts'`,避免 `ReferenceError`。 + +### 原因三十:Vite 依赖预构建与手动拆包 (Manual Chunks) + +**问题描述:** +生产环境下第三方大库(Vue, Uni-App, AntD 等)与业务业务逻辑混在一起,导致每次局部代码更新都会使巨大的主包缓存失效。 + +**解决方案:** +在 `vite.config.js` 中配置 `build.rollupOptions.output.manualChunks`,将 `node_modules` 下的大型库强制拆分为独立文件(如 `vendor-vue`、`vendor-uni`)。这样首屏加载只需下载一次体积恒定的核心库,后续仅下载变化的业务代码。 + --- -这个指南现在涵盖了 uni-app-x 项目开发中最常见的 26 类问题,为后续开发提供了完整的故障排除和标准化指导。 🚀 +这个指南现在涵盖了 uni-app-x 项目开发中最常见的 30 类问题,为后续开发提供了完整的故障排除和标准化指导。 🚀