使用qiankun微前端，构建vue2过渡至vue3项目demo

基座搭建

主应用使用webpack+vue2

1. 将vue2项目作为基座，在老项目中，安装qiankun.js

npm i qiankun -S

2. 在main.js中引入qiankun，并注册微应用。

`import Vue from 'vue'
import App from './App.vue'
import router from './router'
import { registerMicroApps, start } from 'qiankun';

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')
//注册微应用
registerMicroApps([
  {
    name: 'subApp', // app name registered
    //此处为微应用的入口
    entry: 'http://localhost:9000',
    container: '#subApp-container',
    //此处要包含路由path:about，作为微应用的触发规则
    activeRule: '#/about/sub-app' 
  }
]);`

3. 构建主应用和微应用路由。

路由index.js文件，此处使用hash模式，如果使用history模式，需要配置base：

import Vue from 'vue'
import Router from 'vue-router'
/* eslint-disable */
const router = new Router({
    routes: [{
        path: '/main',
        name: 'main',
        component: () => import("../components/HelloWorld.vue")
    },
    {
        path: '/about/*/',
        name: 'about',
        component: () => import("../components/aboutSubapp.vue")
    }]
}
)
Vue.use(Router)
export default router

App文件，做出路由跳转：

<template>
  <div id="app">
    <router-link to="/main">main</router-link>
    <router-link to="/about/sub-app">subApp</router-link>
    <router-view></router-view>
  </div>
</template>

aboutSubapp作为微应用入口文件，需要配置如下：

<template>
  <div>
    <div>父级页面</div>
    <div id="subApp-container"></div>
  </div>
</template>

<script>
import { start } from "qiankun";
export default {
  mounted() {
    if (!window.qiankunStarted) {
      window.qiankunStarted = true;
      start();
    }
  }
};
</script>

微应用配置

微应用使用vue3+ts+vite

1. qiankun微前端框架不支持vite，因为es模块的加载和qiankun的实现方式有冲突，所以需要安装插件进行转换。

npm install vite-plugin-qiankun

2. 在vite.config.ts中引入：

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import qiankun from "vite-plugin-qiankun";


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    //subApp为微应用注册名称，需和主应用main.js注册名称一样。
    //useDevMode为不使用热更新插件，因为开发环境作为子应用时与热更新插件（可能与其他修改html的插件也会存在冲突）有冲突
    qiankun('subApp', {
      useDevMode: true
    })
  ],
  base: '/',
  server: {
    host: "127.0.0.1",
    port: 9000,
    headers: {
      'Access-Control-Allow-Origin': '*'
    }
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

3. 在main.ts中渲染qiankun生命周期：

import {
    qiankunWindow,
    renderWithQiankun
} from 'vite-plugin-qiankun/dist/helper';
if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
    render({ container: "#app" });
} else {
    renderWithQiankun({
        mount(props) {
            console.log('--mount');
            render(props)
        },
        bootstrap() {
            console.log('--bootstrap');
        },
        update() {
            console.log('--update');
        },
        unmount() {
            console.log('--unmount');
            app?.unmount();
        }
    });
}

4. 路由配置：

import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
  history: createWebHistory('/'), 
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/AboutView',
      name: 'AboutView',
      component: () => import('../views/AboutView.vue')
    }
  ]
})