很多小伙伴在工作中都碰到过和我一样的场景，手上的某个项目越来越大，眼看着每次build时间越来越长，吐了??。在杭州某独角兽我碰到了这样的一个项目，他叫运营后台，听名字就知道，他的主要用户是运营人员。问题就是随着公司业务的越来越多，这个运营后台承担的已经不是某一块业务了，而是所有业务的运营操作的中后台都在这上面。你可以这样理解，这个系统的每个一级菜单都是一块独立的业务，相互之间没有任何瓜葛；按常规的理解，这应该是单独的每一个project比较合理，但是正因为他的用户又都是公司的同一群人，他们早已经习惯就在运营后台上去找自己的菜单进行业务操作，拒不接受在他的收藏夹里多出来好几个项目地址。那我们有没有一个办法让我们的项目更好维护，又能让用户不改变他们使用同一个项目的期望呢。这就是写这篇文章的初衷，就是微前端！！????
微前端的好处除了可以解决上面的问题以外，你想想，只要我们把项目改造成了微前端，那每个业务都是独立的project，只不过最终用户都是在一个主项目里去使用，那我们每个project的技术栈也不用定死了，就不存在老项目的技术栈是vue，以至于后面的项目都必须要用vue了，你也可以用react，这就很香不是吗。微前端的原理就是项目被拆成了父子关系，通过基座去引用了子应用，子应用之间是互相隔离的????
qiankun可能是你见过最完善的微前端解决方案??——官方是这么介绍的，基于single-spa，这里我就不详细介绍了，感兴趣的去看看文档，地址丢给你
qiankun
single-spa
改造过程首先我先用vue2-admin-cli——我自己做的脚手架工具，创建两个vue-admin项目来演示，一个作为qiankun基座，另外一个就是我要引用的子应用。
全局安装脚手架npminstall-gvue2-admin-cli#oryarnglobaladdvue2-admin-cli创建项目vue2-admin-cliinitproject_name安装依赖yarn启动项目yarnserve
运行起来就是这样的
现在我们开始分别改造基座qiankun-base和子应用qiankun-vue，我想达到的效果是主应用qiankun-base只保留headersiderfooter的一个基本layout的布局，content部分全部加载子应用
qiankun-baseyarnaddqiankun#或者npmiqiankun-S修改package.json启动命令修改启动端口"serve":"vue-cli-serviceserve--port80--open"src/router/index.ts修改路由模式为historyconstcreateRouter=()=newVueRouter({mode:"history",routes:routesasany,});修改vue.config.js我这里之前用的路由模式是hash上线配置了publicPath导致改为history以后静态资源加载路径有问题所以修改module.exports={//publicPath:"./",devServer:{disableHostCheck:true,//关闭host检查},};
在入口文件src/main.ts下注册微应用并启动：import{registerMicroApps,start}from"qiankun";registerMicroApps([{name:"qiankunVue",entry:"//localhost:",子应用的启动端口修改为，基座使用80，不要相同container:"#qiankunVue",加载子应用的容器activeRule:"/qiankunVue",路由匹配规则},]);//启动qiankunstart();
在你要放置子应用的位置增加一个容器用于加载子应用src/