qiankun微前端的使用

qiankun使用时注意以下几个点

1，子应用项目框架（react，vue）使用的打包格式需要为 umd 格式

2，子应用项目最好配置不受同源策略（跨域）的影响

3，子应用最好使用的路由模式是 history 模式

4，子应用最好使用的是 webpack 打包，目前 qiankun 对 vite 的支持不是很好

例如在 vue2 项目中的配置如下：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,// 配置端口，在主应用中注册的时候需要，以及配置防止跨域devServer: {port:7500,headers:{'Access-Control-Allow-Origin':'*'}},// 配置打包格式configureWebpack: {output: {library: 'm-vue',libraryTarget: 'umd',}}
})

然后下面来说一下怎么使用，我已经上传代码，代码地址为 GitCode - 全球开发者的开源社区,开源代码托管平台

在子应用中需要导出三个生命周期钩子函数，分别是

加载 export async function bootstrap

挂载 export async function mount

卸载 export async function unmount

以上三个钩子函数可以收到 主应用 传递过来的参数 props，然后再在子应用中通过 window.__POWERED_BY_QIANKUN__ 判断一下当前的环境，如果是在 qiankun（主应用） 环境下该怎么渲染，不在 qiankun（自己单独） 环境下怎么渲染

例如在 vue2 子应用中的 main.js

import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = falselet app;
function render(props){const { container } = props;app = new Vue({render: h => h(App),})// 如果是qiankun环境，就挂载到主应用中的container上，否则挂载到#app上app.$mount(container ? container.querySelector('#app') :'#app')
}// 判断是否是qiankun环境
if(!window.__POWERED_BY_QIANKUN__){render({})
}export async function bootstrap(props){console.log(props,'vue bootstrap');props.test && Vue.component('test', props.test);
}export async function mount(props){render(props)console.log(props,'vue mount');
}export async function unmount(){console.log('vue unmount');app.$destroy();
}

在主应用中需要进行使用qiankun进行注册需要加载的子应用，并准备一个容器用于子应用的加载，还有路由的切换，因为qiankun就是监视路由来进行响应的

我在主应用中组成的代码 registerApp.js ：

以下代码表示，当在主应用中进行路由切换，路由为  /vue2 的时候，会进行加载 localhost:7500 的应用，并把他挂载到主应用的 container 容器上面

import { registerMicroApps, start  } from 'qiankun';
import test from './components/test.vue'// 注册
registerMicroApps([{name: 'vueApp',entry: '//localhost:7500',container: '#container',activeRule: '/vue2',props: {test: test,},},
]);// 开启
start();