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

35次阅读

共计 1133 个字符，预计需要花费 3 分钟才能阅读完成。

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 即可

正文完