关于微前端组件qiankun在生产中的使用浅谈

qiankun官方文档：https://qiankun.umijs.org/zh/guide/getting-started
版本：

"qiankun": "^2.4.0",
"vue": "^2.5.2"

vue 入口文件main.js
正常的vue入口文件写法

new Vue({
    el: '#app',
    router,
    store,
    components: { App },
    apolloProvider,
    template: '<App/>'
 })

加入微前端之后的写法：

let instance = null;
function render(props = {}) {
    const { container } = props;
    instance = new Vue({
        router,
        store,
        apolloProvider,
        render: h => h(App),
    }).$mount(container ? container.querySelector('#app') : '#app');
}
// webpack打包公共文件路径
if (window.__POWERED_BY_QIANKUN__) {
    __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
} else {
    // 独立运行时
    render();
}
//
export async function bootstrap() {
    console.log('[vue] vue app bootstraped');
}
export async function mount(props) {
    console.log('[vue] props from main framework', props);
    render(props);//props为微前端渲染的节点
}
export async function unmount() {
    // instance.$destroy();
    // instance.$el.innerHTML = '';
    // instance = null;
    // router = null;
}

主应用注册微前端入口

import { registerMicroApps, start } from 'qiankun';
registerMicroApps([{
    name: 'subapp',
    container: '#subAppContainer',
    entry: 'http://10.168.0.0:8080/console',//
    activeRule: '/govern',
}, ], { //父级组件传递数据到子组件
    beforeLoad: app => {
        //
        window.qiankunroutebase = '/microApp';
    }
});
//start()//在activeRule 的页面上触发start即可