关于qiankun:关于微前端组件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即可