微前端Single-SPA

什么是微前端？微前端根据不同的功能拆分成多个独立的模块（子应用），这些子应用通过主应用加载。微前端的核心就是把它拆了，拆完了再组装。不同的团队开发相同的应用程序，但使用不同的技术堆栈。每个团队独立开发和部署，不依赖于其他团队的代码。旧的项目代码和新的技术栈集成在同一个应用中。有人说这个可以用iframe解决。请注意，与微前端相比，iframe有很多缺点。比如1.左边是菜单，右边是加载不同的iframe。每当点击一个菜单，就会加载整个模块的js，严重影响性能。2.当用户在某个页面刷新浏览器时，用户当前点击会丢失SingleSpa实战1.创建子app这里我创建了一个vue子appvuecreateapp12。下载single-spa-vue包npminstallsingle-spa-vue3。创建主应用程序vuecreatemain-appnpmisingle-spa4。mainimportVueinthemainapplicationfrom'vue'importAppfrom'./App.vue'importrouterfrom'./router'importElementUIfrom'element-ui';import'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);//动态添加脚本scriptconstloadScript=async(url)=>{awaitnewPromise((resolve,reject)=>{constscript=document.createElement('script');script.src=url;script.onload=resolve;script.onerror=reject;document.head.appendChild(script)});}import{registerApplication,start}from'single-spa';//注册子应用registerApplication('app1',async()=>{//子应用对应的接口awaitloadScript('http://localhost:10000/js/chunk-vendors.js');awaitloadScript('http://localhost:10000/js/app.js');returnwindow.app1},//当匹配的url路径为/app1location=>location.pathname.startsWith('/app1'))//启动应用程序start();newVue({router,render:h=>h(App)}).$mount('#app')5.主应用的app.vue6.子应用main.jsimportVue从'vue'从'./App.vue'导入应用程序从'./router'导入singleSpaVue从'single-spa-vue'Vue.config.productionTip=falseconstappOptions={el:'#app1',//挂载到主应用的哪个元素在路由器上，render:h=>h(App)}//返回一个生命周期对象constvueLifeCycle=singleSpaVue({Vue,appOptions});//子应用必须导出以下生命周期bootstrap、mount、unmountxportconstbootstrap=vueLifeCycle.bootstrap;exportconstmount=vueLifeCycle.mount;exportconstunmount=vueLifeCycle.unmount;导出默认vueLifeCycle；7.打包成主应用的类库（在子应用中配置）添加到srcvue.config.jsmodule.exports={configureWebpack:{output:{library:'app1',libraryTarget:'umd'//MountedtoWindows},devServer:{port:10000}}}8.设置子路由Configuration经过上面七步的配置，可以显示如下页面，但是当点击Home路由时，它默认情况下将与主应用程序一起跳转。这里需要配置子应用相对于子路由的路由路径Sub-routingrouter.jsconstrouter=newVueRouter({mode:'history',base:'/app1',//主应用默认到/app1加载子路由，从而使用/app1作为相对路径routes})9.设置子应用的__webpack_public_path__点击About加载about.js时，请求仍然是main下的about.js应用路径，但是在主应用中不存在，所以报如下错误。我们需要为子应用指定一个__webpack_public_path__，在点击时，默认将__webpack_public_path__指向子应用，直接在子应用下找到文件。添加if(window.singleSpaNavigate){__webpack_public_path__='http://localhost:10000/'}10。子应用启动单个项目时，需要判断是否被主应用应用。如果没有，需要挂载到子应用的id上if(!window.singleSpaNavigate){删除appOptions.el;新Vue(appOptions).$mount('#app')}