微前端子应用中Vue路由懒加载需确保构建支持动态import、正确配置base/publicPath以解决路径解析，并在生命周期中处理卸载后状态混乱问题。
在微前端子应用中配置 Vue 路由懒加载，核心原则没变：仍用 () => import('@/views/xxx.vue')，但需额外关注子应用的独立构建、路径解析、资源加载上下文这三件事。微前端不是“禁用懒加载”，而是让懒加载在沙箱隔离和跨应用协作下依然可靠。
确保子应用构建产物支持动态导入
子应用必须由支持动态 import() 的构建工具（如 Vite 或 Webpack 5+）打包，且不能禁用代码分割功能。
- Vite 子应用：默认开启，无需额外配置；检查
vite.config.ts中未设置build.rollupOptions.output.manualChunks过度合并，否则可能把所有懒加载组件打到一个 chunk 里，失去按需意义 - Webpack 子应用：确认已启用
optimization.splitChunks，并避免在splitChunks.cacheGroups中将所有异步模块强行归入vendor - 禁止使用
require.ensure或resolve => require([...])—— 这类 Webpack 2 时代的写法在微前端沙箱中常因require被劫持而失效
处理相对路径与 public 资源引用
子应用运行时的 base（如 /app-order/）会影响动态 import 的请求路径。若子应用部署在非根路径，需确保构建输出的 chunk 加载地址正确。
HISUI 前端框架开发指南（IRIS版）
下载
HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库，专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。 涵盖 40 个组件的官方文档参考，支持声明式与编程式两种初始化方式，提供 $cm/$m 数据访问方法。
- Vite 子应用：在
vite.config.ts中显式配置base: '/app-order/'（与主应用注册的activeRule一致），Vite 会自动为import()生成带前缀的 chunk 请求 URL - Webpack 子应用：设置
output.publicPath: '/app-order/'，否则懒加载 chunk 会尝试从根目录（/assets/xxx.js）加载，404 - 避免在
import()中使用绝对 public 路径（如import('/public/config.json')），这类资源不属于代码分割范畴，应改用fetch或预置为环境变量
配合微前端生命周期做加载兜底
子应用卸载后，其内部的异步 chunk 可能被浏览器缓存，但若用户快速切回，某些框架（如 qiankun）会复用旧实例，导致 import() 报错或状态混乱。
- 在
unmount钩子中不需手动清空模块缓存（现代浏览器不支持），但可重置路由实例，例如调用router.replace({ path: '/loading' })避免残留导航 - 在
mount后首次路由跳转前，可加轻量级校验：if (typeof window.__POWERED_BY_QIANKUN__ !== 'undefined') { /* 确保 import 能执行 */ } - 对关键路由（如登录页）保留非懒加载版本备用：用条件 import 切换，例如
component: process.env.NODE_ENV === 'development' ? () => import('@/views/Login.vue') : Login，便于调试
慎用 webpackChunkName 分组合并
微前端强调子应用自治，过度合并 chunk 可能破坏边界清晰性，也影响主应用的资源预加载策略。
- 推荐每个页面级路由组件单独 chunk（默认行为），例如
const Home = () => import('@/views/Home.vue') - 如确需分组（如权限管理模块下的多个页面），使用注释语法统一命名：
/* webpackChunkName: "admin" */，但注意该名称仅用于生成文件名，不影响运行时逻辑 - 避免跨子应用共用 chunk 名——不同子应用即使同名，也会产出不同 hash 文件，不会冲突，但不利于主应用统一做
prefetch
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
