vue 3微前端需分主子应用初始化：主应用用vue cli创建并集成qiankun，注册子应用；子应用须导出生命周期钩子、处理publicpath、支持跨域；路由需通配预留，构建输出umd格式。
Vue 3 项目初始化时配置微前端子应用架构，核心是区分主应用和子应用的初始化逻辑，不是“一步到位”，而是按角色分两套初始化路径：主应用负责注册与调度，子应用负责可接入声明。关键不在“创建时选模板”，而在“创建后立即补全微前端契约”。
主应用初始化：用 Vue CLI 创建 + 手动集成 qiankun
不要用 Vite 初始化主应用（qiankun 官方对 Vite 主应用无兼容问题，但社区实践普遍基于 Webpack 生态更稳定；且多数企业基建依赖 Webpack 插件链）。推荐操作：
- 执行
vue create main-app，选择默认 preset（Webpack-based） - 安装 qiankun：
npm install qiankun --save - 在
main.js中替换原有挂载逻辑，改用registerMicroApps+start：- 定义子应用数组，含
name、entry（开发地址或部署域名）、container（DOM 节点 ID）、activeRule（路由前缀，如/micro-vue） - 调用
start()启动，可传入sandbox和prefetch等选项
- 定义子应用数组，含
- 在
App.vue或独立容器页中预留挂载点，例如：<div id="subapp-container"></div>
子应用初始化：先独立运行，再改造为 qiankun 兼容形态
子应用可以是 Vue CLI 或 Vite 创建的任意 Vue 3 项目（Vite 子应用需额外插件支持），但必须满足两个硬性条件：
-
导出生命周期钩子：在入口文件（如
main.js）中显式导出bootstrap、mount、unmount三个函数，其中mount必须接收props并用于挂载到指定容器 -
处理静态资源路径：添加
public-path.js文件，在子应用启动前动态设置__webpack_public_path__（Webpack 项目）或通过vite-plugin-qiankun配置（Vite 项目） - 开发时需开启跨域：
devServer.headers['Access-Control-Allow-Origin'] = '*'（Webpack）或server.cors = true（Vite）
路由联动：主应用需为子应用预留通配路由
主应用的 Vue Router 不能拦截子应用路径，否则子应用无法激活。正确做法是：
- 在主应用
router/index.js中添加一条通配规则，指向空容器组件，例如：{ path: '/micro-vue/:pathMatch(.*)*', name: 'micro-vue', component: () => import('@/views/MicroContainer.vue') } -
MicroContainer.vue只需包含一个<div id="subapp-container"></div>，不写任何业务逻辑 - 子应用内部仍使用自己的
createWebHistory，但历史模式 base 应适配：若主应用在/，子应用设为window.__POWERED_BY_QIANKUN__ ? '/micro-vue' : '/'
构建与部署注意点
子应用打包输出必须是 UMD 格式（Webpack）或通过插件适配（Vite），确保能被主应用动态加载：
- Webpack 子应用：在
vue.config.js的configureWebpack.output中设置library、libraryTarget: 'umd'、jsonpFunction - Vite 子应用：安装
vite-plugin-qiankun，在vite.config.ts中启用插件并配置useDevMode和umd输出 - 子应用部署后，其
index.html中的静态资源引用必须可被主应用跨域加载（建议部署在同域或配置 CORS）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
