微前端框架（qiankun）配置

微前端框架（qiankun）使用记录参考：https://qiankun.umijs.org/zh/...https://blog.csdn.net/hjb2722...其他疑惑是否主框架和子框架frame要安装乾坤框架答：不需要，只需要在主框架安装即可，子框架不需要引入。主要应用路径推荐使用历史模式安装qiankunyarnaddqiankun或npmiqiankun-S配置微应用///src/micro/apps.jsconstapps=[{name:'planResource',entry:'//localhost:8083',container:'#iframe',activeRule:'/plan'},{name:'configration',entry:'//localhost:8081',容器:'#iframe',activeRule:'/configure'}];导出默认应用；registermicroappsinthemainapp//src/micro/index.jsimport{registerMicroApps,addGlobalUncaughtErrorHandler,start}from'qiankun';importappsfrom'./apps';//registerMicroApps第二个参数可选，如果你想做something，写到对应的地方registerMicroApps(apps,{beforeLoad:[app=>{console.log('[LifeCycle]beforeload%c%s','color:green;',app.name);},],beforeMount:[app=>{console.log('[LifeCycle]beforemount%c%s','color:green;',app.name);},],afterUnmount:[app=>{console.log('[LifeCycle]afterunmount%c%s','color:green;',app.name);},],},);//发生错误时显示什么console.log('微应用加载失败，请检查应用是否正在运行');}});exportdefaultstart;使用start///src/main.jsimportmicroAppfrom'./micro';newVue({router,store,render:(h)=>h(App)}).$mount('#app');microApp();注意：不一定要放在入口文件中，根据你的项目设置如果你的微应用容器在index.html中，也没什么大问题，但是大部分嵌入Layout框架的时候，正常进入是没有问题的。如果刷新微应用路径下的页面，会出现如下报错UncaughtError:application'cloud'diedinstatusLOADING_SOURCE_CODE:[qiankun]Targetcontainerwith#cloudnotexistedwhilecloudloading!这种情况下，建议更改组件挂载的事件钩子启动，在main.js下导入，不执行eg://main.js...importmicroAppfrom'./micro'//加载乾坤appmicroApp//注册应用//包含子应用容器的VUE组件子应用修改webpack配置//webpack.config.js||vue.config.jsconstport=8088;constpackageName=require("./package.json").name;module.exports={lintOnSave:false,//关闭eslint检测devServer:{port,//这里的端口是一个子应用，必须和父应用配置的应用端口相同qiankun内部请求都是fetchh请求资源，所以子应用必须允许跨域"Access-Control-Allow-Origin":"*",},},configureWebpack:{output:{//资源打包路径library:`${packageName}`,libraryTarget:"umd",jsonpFunction:`webpackJsonp_${packageName}`,//publicPath:`//localhost:${port}`,},},//outputDir:'dist',//assetsDir:'static',//文件名散列:true,};添加公共路径配置文件并导入///src/micro/public-path.jsif(window.__POWERED_BY_QIANKUN__){//eslint-disable-next-lineno-undef__webpack_public_path__=window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;}///src/main.jsimport'@/micro/public-path'路由实例化配置//src/router/index.jsimportVuefrom'vue'importVueRouterfrom'vue-router'Vue.use(VueRouter)constroutes=[{path:'/',name:'Home',component:()=>import('../views/Home.vue')},{path:'/about',name:'About',component:()=>import('../views/About.vue')}]constrouter=newVueRouter({mode:'history',//@ts-ignorebase:window.__POWERED_BY_QIANKUN__?'/cloud':'/',//单机运行使用“/”作为根路径//base:'/cloud',routes})exportdefaultrouterVueinstantiationwrapperandlifecyclehookexport///src/main.jsimport"@/micro/public-path";importVuefrom"vue";importAppfrom"./App.vue";importactionsfrom"./micro/actions.js";importrouterfrom"./router";importstorefrom"./sotre";letinstance=null;functionrender(props={}){//练习后这个判断必须做，否则独立运行会报错actions.onGlobalStateChange((state)=>{console.log("app1",state);},true);}}const{容器}=道具；//这里是挂载在自己的html中。基础将获取已安装的html并将其插入constrenderContainer=container?container.querySelector("#app"):"#app";instance=newVue({router,store,render:(h)=>h(App),}).$mount(renderContainer);}//@ts-ignoreif(!window.__POWERED_BY_QIANKUN__){//默认独立运行render();}//父应用加载子应用，子应用必须暴露三个接口：bootstrap、mount、unmountexportasyncfunctionbootstrap(){console.log("cloudappbootstraped");}exportasyncfunctionmount(props){console.log("挂载");render(props);}exportasyncfunctionunmount(){console.log("unmount");instance.$destroy();}传值Actionsprops传值不够灵活，不推荐使用Actions的推荐方式,可以在状态改变时触发主应用初始化全局跨应用通信方法///src/micro/actions.jsimport{initGlobalState}from'qiankun';常量初始化状态={};constactions=initGlobalState(initState);导出默认操作；在需要设置跨应用全局状态的组件中：///src/app.vue注意：可以监听vuex数据，如果有变化，执行setGlobalState子应用全局动作定义///src/micro/actions.jsfunctionemptyAction(){//警告：提示当前使用的是空操作console.warn('Currentexecuteactionisempty!');}classActions{//默认值为空Actionactions={onGlobalStateChange:emptyAction,setGlobalState:emptyAction};/***设置动作*/setActions(actions){this.actions=actions;}/***地图*/onGlobalStateChange(...args){返回this.actions.onGlobalStateChange(...args);}/***映射*/setGlobalState(...args){returnthis.actions.setGlobalState(...args);}}constactions=newActions();导出默认操作；从主应用程序获取通信方法并在应用程序渲染之前将其注入到操作中///src/main.jsimport"@/micro/public-path";importVuefrom"vue";importAppfrom"./App.vue”；从“./micro/actions.js”导入动作；从“./router”导入路由器；从“./sotre”导入商店；让实例=空；函数渲染（props={}）{//@ts-ignoreif(window.__POWERED_BY_QIANKUN__){if(props){actions.setActions(props);actions.onGlobalStateChange((state)=>{console.log("app1",state);const{token,ability,tabs}=state;store.state.ability=abilitystore.state.token=tokenstore.state.制表符=制表符},真);}}const{容器}=道具；//这里是将它挂载到你自己的html中，base将获取挂载的html并将其插入constrenderContainer=contain呃？container.querySelector("#app"):"#app";instance=newVue({router,store,render:(h)=>h(App),}).$mount(renderContainer);}//@ts-ignoreif(!window.__POWERED_BY_QIANKUN__){//运行render()默认独立；}//父应用加载子应用，子应用必须暴露三个接口：bootstrap、mount、unmountexportasyncfunctionbootstrap(){console.log("cloudappbootstraped");}exportasyncfunctionmount(props){console.log("挂载");render(props);}exportasyncfunctionunmount(){console.log("unmount");instance.$destroy();}开发DevTools如果基础和子应用使用VUE，使用devtools比较老：如果使用devtools5.xx，如果使用devtools6只能查看主框架的数据.xx（目前只有内测版），基础和子应用使用不同的VUE版本，那么可以查看对应应用的数据，但是开发工具会一直报错，蛋疼建议：基础框架和子框架使用不同的框架语言开发（这样比较好，或者有解决办法）主应用传值时是非常重要：否则第一次是不可能取到值的。参考传值Actions主应用下的设置来监控vuex