子应用必须暴露bootstrap、mount、unmount三个生命周期钩子，打包为UMD格式并配置正确library与publicPath，路由需适配Qiankun环境，开发时需开启跨域且固定端口。
Vue 3 项目初始化时配置子应用微前端（Qiankun）架构，关键不在“主应用怎么建”，而在于**子应用必须按 Qiankun 要求暴露生命周期钩子、打包为 UMD 格式、适配运行环境**。主应用可用 Vue CLI 或 Vite 创建，但子应用若用 Vite，需额外插件且存在兼容风险；Webpack 方案更稳定、文档支持更全。
子应用必须暴露的三个生命周期钩子
子应用不是普通 Vue 项目，它要被主应用动态加载和卸载，因此必须导出 bootstrap、mount、unmount 方法。这些钩子由 Qiankun 在对应阶段调用：
- bootstrap：仅执行一次，用于初始化逻辑（如配置 axios 实例、注册全局指令）
- mount：每次激活子应用时执行，创建 Vue 实例并挂载到指定容器
- unmount：每次切出子应用时执行，手动卸载实例、清除定时器/事件监听等副作用
子应用打包必须是 UMD 格式 + 正确的 library 配置
Qiankun 依赖子应用以 UMD 模块形式被加载。使用 Webpack（如 Vue CLI 默认）时，在 vue.config.js 中配置：
蓝湖代码转vue2.0+element-ui
下载
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
-
output.library设为${name}-[name]（与 package.json 的 name 一致） -
output.libraryTarget必须为'umd' -
output.jsonpFunction建议设为唯一值，如webpackJsonp_${name}，避免多子应用冲突 -
publicPath或base要与主应用中activeRule路径匹配（例如主应用规则是/sub-vue，子应用base就该设为/sub-vue/）
子应用路由需适配乾坤运行环境
子应用的 Vue Router 必须识别是否在 Qiankun 环境下运行，否则 history 模式会跳转失败：
- 判断
window.__POWERED_BY_QIANKUN__是否存在 - 若存在，
createWebHistory的 base 参数应设为子应用专属路径（如/sub-vue/） - 若不存在（独立运行），base 保持
/ - 开发时建议关闭路由 strict 模式，避免因路径前缀导致白屏
子应用开发服务需开启跨域与端口固定
本地调试时，主应用和子应用通常不同源，子应用 devServer 必须允许跨域：
devServer.headers['Access-Control-Allow-Origin'] = '*'-
devServer.port固定（如 7101），方便主应用写死 entry 地址 -
devServer.disableHostCheck = true（Vite 中为server.host = true） - Vite 子应用还需安装
vite-plugin-qiankun并启用useDevMode: true
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
