07. vue3+vite+qiankun搭建微应用前端框架，并接入vue3微应用

前言

因为业务系统接入的需要，决定将一个vue3+vite+ts的主应用系统，改造成基于qiankun的微应用架构。此文记录了改造的过程及vue3微应用接入的种种问题。

网上有很多关于微应用改造的案例，但很多都没写部署之后什么情况。写了部署的，没有实操部署在二级目录、三级目录是什么情况，甚至没有对部署之后的情况做测试、没有说明。这是在整个改造过程中最难的一点，也是最困扰我的一个问题。我们所改造的应用说明：

• 主应用：vue3+vite+ts
• 微应用1：vue2，qiankun官网API是基于vue2+webpack，我们对vue2也进行了接入，但是在本篇文章中不做说明。
• 微应用2：vue3+vite，由于主应用已经是vue3的系统，所以，微应用也决定直接使用vue3框架

不懂的地方可以参考qiankun官方API，本文记录的是 基于vue3+vite的微应用，如何在vue3+vite的主应用中接入，以及完整的改造过程。首先有三个前提条件：

• 主应用为经典运营系统的左右布局结构（下图），要求将微应用接入为主应用的一个路由页面；
• 微应用和主应用部署在不同的服务；
• 主应用部署在二级目录。

图中所示的微应用菜单处，就是可以动态插拔微应用的菜单。

主应用

1. 在主应用中注册微应用路由

const microRouters = [
    {
   
    
    
        path: '/vite-vue3-app2/', // path值必须与微应用中，路由前缀的`${parentBase}${packagejson.name}`中的${packagejson.name}值相同，否则访问会出错，${parentBase}为主应用部署的目录路径，后面内容中会讲
        component: Layout,
        name: 'vite-vue3-app2',
        meta: {
   
    
     title: '微应用测试2', icon: 'dashboard' },
        children: [ // 想要显示的微应用路由，都需要在主应用中注册
            {
   
    
    
                path: 'hello',
                component: () => import('@/views/Portal.vue'), // 所有路由都使用同一个vue组件
                hidden: false,
                name: 'app2-hello',
                meta: {
   
    
     title: 'app2-hello', icon: 'dashboard' }
            },
            {
   
    
    
                path: 'home',
                component: () => import('@/views/Portal.vue'),
                hidden: false,
                name: 'app2-home',
                meta: {
   
    
     title: 'app2-home', icon: 'dashboard' }
            },
            {
   
    
    
                path: 'about',
                component: () => import('@/views/Portal.vue'),
                hidden: false,
                name: 'app2-about',
                meta: {
   
    
     title: 'app2-about', icon: 'dashboard' }
            },
        ]
    },
]

2. 注册微应用

registerMicroApps([
  {
   
    
    
        name: 'app2',
        entry: '/app2/