qiankun - vite + vue3踩坑

环境：

　　主应用： vite + vue3 + ts
　　子应用： vite + vue3 + ts

 

搭建步骤 - 主应用：

1. 安装qiankun

yarn add qiankun

2.在入口文件中 注册子应用路由 （也可以单独写一个文件，在入口文件中调用）

import { registerMicroApps, start } from 'qiankun'

const loader = (loading: boolean) => {
    console.log('loading', loading)
};
// https://qiankun.umijs.org/zh
// https://jwchan.cn/_posts/other/qiankun_micro_app.html#%E5%85%A5%E5%8F%A3%E6%96%87%E4%BB%B6-main-js
const MicroConfig = [
    //name: 微应用的名称,
    //entry: 微应用的入口,
    //container: 微应用的容器节点的选择器或者 Element 实例,
    //activeRule: 激活微应用的规则(可以匹配到微应用的路由),
    //loader: 加载微应用的状态 true | false
    {
        name: 'vue3',
        entry: 'http://localhost:6100',
        container: '#container',
        activeRule: '/#/vue3',
        loader
    },
];
registerMicroApps(MicroConfig, {
    // qiankun 生命周期钩子 - 微应用加载前
    beforeLoad: (app: any) => {
        console.log("before load+++++++++++", app.name);
        return Promise.resolve();
    },
    beforeMount: (app: any) => {
        console.log("before mount----------", app.name);
        return Promise.resolve();
    },
    // qiankun 生命周期钩子 - 微应用挂载后
    afterMount: (app: any) => {
        console.log("after mount============", app.name);
        return Promise.resolve();
    },
    afterUnmount: (app: any) => {
        console.log("after unmount===+++++----", app.name);
        return Promise.resolve();
    },
});

// 启动 qiankun
start({
    prefetch: false, // 开启预加载
    sandbox: {
        experimentalStyleIsolation: true, //   开启沙箱模式,实验性方案
    },
});
// 添加全局异常捕获
addGlobalUncaughtErrorHandler((handler) => {
    console.log("异常捕获", handler);
});

 

搭建项目 - 子应用：

1. 安装vite-plugin-qiankun（qiankun官方不支持vite）需要安装插件

yarn add vite-plugin-qiankun

2. vite.config.js 添加相关配置

import qiankun from 'vite-plugin-qiankun'

export default defineConfig({
    plugins: [
        vue(),
        qiankun('vue3', {
            useDevMode: true
        })
    ],
    server: {
        ...,
        headers: {
            'Access-Control-Allow-Origin': '*', // 主应用获取子应用时跨域响应头
        },
    }
})

3. 入口文件：main.ts中添加 导出生命周期配置以及qiankun环境变量判断

renderWithQiankun： 为子应用导出一些生命周期函数 供主应用在特殊的时机调用

qiankunWindow： qiankunWindow.POWERED_BY_QIANKUN 可判断是否在qiankun环境下

// 入口文件处 ： main.ts
import { renderWithQiankun, qiankunWindow, QiankunProps } from 'vite-plugin-qiankun/dist/helper'


renderWithQiankun({
    mount(_props) {
        console.log('mount');
    },
    bootstrap() {
        console.log('bootstrap');
    },
    unmount(_props: any) {
        console.log('unmount');
    },
    update: function (props: QiankunProps): void | Promise<void> {
        console.log('update');
    }
});