Vue+qiankun快速实现前端微服务

本文介绍Vue项目如何实现前端微服务1.前言什么是微前端构建现代Web应用的技术、策略和秘诀可以独立发布功能的多个团队。--MicroFrontends微前端是多个团队通过独立发布功能共同构建现代Web应用的技术手段和方法策略。有关微前端的更多信息，我建议您阅读以下文章：微前端来自martinfowler.com的微前端可能是您见过的最完整的微前端解决方案。微前端的核心价值qiankunqiankun是由蚂蚁金服开源的一整套微前端解决方案。详细说明可以在文档和Github中找到。下面将介绍Vue项目如何通过微服务demo接入qiankun，代码地址：micro-front-vue)2.配置主应用使用vuecli快速创建主应用；installqiankun$yarnaddqiankun#或者npmiqiankun-S调整主应用的main.js文件：如下：importVuefrom"vue"importAppfrom"./App.vue"importrouterfrom"./router"import{registerMicroApps,setDefaultMountApp,start}from"qiankun"Vue.config.productionTip=falseletapp=null;/***渲染函数*appContent子应用html内容*loading子应用加载效果，可选*/functionrender({appContent,loading}={}){if(!app){app=newVue({el:"#container",router,data(){return{content:appContent,loading};},render(h){returnh(App,{props:{content:this.content,loading:this.loading}});}});}else{app.content=appCon帐篷;app.loading=加载中；}}/***路由监听器*@param{*}routerPrefixprefix*/functiongenActiveRule(routerPrefix){returnlocation=>location.pathname.startsWith(routerPrefix);}functioninitApp(){render({appContent:'',loading:true});}initApp();//传递给子应用的数据letmsg={data:{auth:false},fns:[{name:"_LOGIN",_LOGIN(data){console.log(`父应用返回信息${data}`);}}]};//注册子应用registerMicroApps([{name:"sub-app-1",entry:"//localhost:8091",render,activeRule:genActiveRule("/app1"),props:msg},{name:"sub-app-2",entry:"//localhost:8092",render,activeRule:genActiveRule("/app2"),}],{beforeLoad:[app=>{console.log("加载前",app);}],//回调beforeMount:[app=>{console.log("beforemount",app);}],//回调afterUnmount:[app=>{console.log("afterunload",app);}]//卸载后回调});//设置默认子应用，与genActiveRule中的参数一致setDefaultMountApp("/app1");//启动start();修改主app中的bindingindex.htmlid必须和elbindingdom一致；调整App.vue文件，增加渲染子应用框：script>exportdefault{name:"App",props:{loading:Boolean,content:String}};创建一个vue.config.js文件并设置端口：module。exports={devServer:{port:8090}}3.配置子应用在主应用同目录下快速创建子应用，子应用不需要安装qiankun配置子应用main.js:importVue从'vue';导入VueRouterm'vue-router';从'./App.vue'导入应用程序;从'./router'导入路由;导入'./public-path';Vue.config.productionTip=false;letrouter=null;letinstance=null;functionrender(){router=newVueRouter({base:window.__POWERED_BY_QIANKUN__?'/app1':'/',mode:'history',routes,});instance=newVue({router,render:h=>h(App),}).$mount('#app');}if(!window.__POWERED_BY_QIANKUN__){render();}导出异步函数bootstrap(){console.log('vueappbootstraped');}exportasyncfunctionmount(props){console.log('propsfrommainapp',props);render();}exportasyncfunctionunmount(){instance.$destroy();实例=空；router=null;}配置vue.config.jsconstpath=require('path');const{name}=require('./package');functionresolve(dir){returnpath.join(__dirname,dir);}常量端口=8091;//devportmodule.exports={/***你需要设置public路径，如果您计划在子路径下部署站点，*例如GitHubPages。如果您计划将站点部署到https://foo.github.io/bar/，*那么publicPath应该设置为“/bar/”。*在大多数情况下请使用'/'!!!*详细信息：https://cli.vuejs.org/config/#publicpath*/outputDir:'dist',assetsDir:'static',filenameHashing:true,//调整内部webpack配置。//参见https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.mddevServer:{//host:'0.0.0.0',hot:true,disableHostCheck:true,port,overlay:{warnings:false,errors:true,},headers:{'Access-Control-Allow-Origin':'*',},},//自定义webpack配置configureWebpack:{resolve:{alias:{'@':resolve('src'),},},output:{//把子应用打包成umd库格式library:`${name}-[name]`,libraryTarget:'umd',jsonpFunction:`webpackJsonp_${name}`,},},};有一点需要注意：子应用必须支持跨域：因为qiankun获取子应用是通过fetch导入的静态资源，所以必须要求这些静态资源支持跨域；usewebpackstaticpublicPath配置：可以通过两种方式设置，一种是直接导入mian.js中的public-path.js文件，一种是直接在开发环境中修改vue.config.js:{output:{publicPath:`//localhost:${port}`;public-path.js内容如下：if(window.__POWERED_BY_QIANKUN__){//eslint-disable-next-lineno-undef__webpack_public_path__=window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__}至此，Vue的前端微服务项目简单的完成了，但是在实际的开发过程中，并没有那么简单，还存在应用之间的跳转，应用之间的通信等问题。代码和文章持续更新中……