技术选型与初始化

Vue3 + Qiankun 适合构建微前端架构，主应用负责基座和路由管理，子应用独立开发部署。确保环境已安装 Node.js（≥14）和 Vue CLI（≥5.0）。

主应用配置

1. 创建主应用
   使用 Vue CLI 初始化项目：

   vue create main-app
   

2. 安装 Qiankun

   npm install qiankun -S
   

3. 配置主应用入口
   修改 main.js，注册子应用并启动 Qiankun：

   import { createApp } from 'vue';
   import { registerMicroApps, start } from 'qiankun';
   import App from './App.vue';
   
   const app = createApp(App);
   app.mount('#app');
   
   registerMicroApps([
     {
       name: 'sub-app',
       entry: '//localhost:7101', // 子应用地址
       container: '#subapp-container',
       activeRule: '/sub-app',
     },
   ]);
   
   start();
   

子应用配置

1. 创建子应用

   vue create sub-app
   

2. 配置子应用导出
   修改 main.js，导出生命周期钩子：

   import { createApp } from 'vue';
   import App from './App.vue';
   
   let instance = null;
   
   function render(props = {}) {
     const { container } = props;
     instance = createApp(App);
     instance.mount(container ? container.querySelector('#app') : '#app');
   }
   
   if (!window.__POWERED_BY_QIANKUN__) {
     render();
   }
   
   export async function bootstrap() {}
   export async function mount(props) {
     render(props);
   }
   export async function unmount() {
     instance.unmount();
   }
   

3. 配置打包输出
   修改 vue.config.js，设置跨域和库格式：

   const { defineConfig } = require('@vue/cli-service');
   module.exports = defineConfig({
     devServer: {
       port: 7101,
       headers: {
         'Access-Control-Allow-Origin': '*',
       },
     },
     configureWebpack: {
       output: {
         library: 'sub-app',
         libraryTarget: 'umd',
       },
     },
   });
   

路由配置

1. 主应用路由
   使用 vue-router 管理基座路由，确保路由与子应用 activeRule 匹配：

   import { createRouter, createWebHistory } from 'vue-router';
   
   const router = createRouter({
     history: createWebHistory(),
     routes: [{ path: '/sub-app', component: () => import('./views/SubApp.vue') }],
   });
   

2. 子应用路由
   子应用路由需兼容独立运行和嵌入模式：

   const router = createRouter({
     history: createWebHistory(window.__POWERED_BY_QIANKUN__ ? '/sub-app/' : '/'),
     routes: [...],
   });
   

样式隔离

1. CSS 命名空间
   为子应用根元素添加唯一类名，避免样式冲突：

   <template>
     <div class="sub-app-container">
       <!-- 子应用内容 -->
     </div>
   </template>
   
   <style scoped>
   .sub-app-container {
     /* 子应用样式 */
   }
   </style>
   

2. 动态加载样式
   使用 postcss 插件自动添加前缀：

   // postcss.config.js
   module.exports = {
     plugins: {
       'postcss-prefix-selector': {
         prefix: '.sub-app-container',
         transform(prefix, selector) {
           return `${prefix} ${selector}`;
         },
       },
     },
   };
   

通信机制

1. 主应用传递数据
   通过 props 向子应用注入全局状态或方法：

   registerMicroApps([
     {
       name: 'sub-app',
       entry: '//localhost:7101',
       container: '#subapp-container',
       activeRule: '/sub-app',
       props: { sharedState: { user: 'admin' } }, // 传递数据
     },
   ]);
   

2. 子应用接收数据
   在子应用生命周期中获取 props：

   export async function mount(props) {
     console.log(props.sharedState); // 接收主应用数据
     render(props);
   }
   

部署与优化

1. 独立部署
   子应用打包后上传至 CDN 或静态服务器，主应用通过 entry 配置子应用地址。

2. 资源预加载
   在主应用中配置 prefetch 加速子应用加载：

   start({ prefetch: 'all' });
   

3. 公共依赖共享
   通过 externals 避免重复加载 Vue 等库：

   // vue.config.js
   module.exports = {
     configureWebpack: {
       externals: {
         vue: 'Vue',
       },
     },
   };
   

常见问题解决

1. 跨域问题
   确保子应用服务器配置 Access-Control-Allow-Origin: *，或使用代理。

2. 路由冲突
   子应用路由需基于主应用路由前缀，避免路径重复。

3. 生命周期未触发
   检查子应用是否正确导出 bootstrap、mount、unmount 方法。

通过以上步骤，可快速搭建基于 Vue3 和 Qiankun 的微前端架构，实现主应用与子应用的解耦和独立开发。