一直想写这篇文章，但是奈何太忙及文笔比较烂，写的很慢，断断续续写了好久。话不多说进入正题！
目前前端微服务架构也有很多解决方案了，比如阿里的qiankun，适用于vue，react，angular，甚至原生和jquery。但是学习成本比较高，而且比较庞大，并不适合中小型的单一框架的产品。所以给大家介绍另一款前端微服务解决方案的架构：KFC，目前单纯的解决vue，react还在开发。适用于没有历史包袱的vue类中小型产品，传统的nginx+html模式部署，简单易维护。这套架构我们已经使用一年半了，线上稳定，加载效率也高。
官网链接是： bigdata-fe.ks3-cn-beijing.ksyuncs.com/project/kfc…
先上个架构图：
主要思想是主项目通过json配置文件加载子项目的资源。每个子项目都是一个git仓库，每个子项目都是一条业务线，由一个或两个人维护。
再来个代码架构图：
每个子项目都有一个devMain.js和proMain.js。devMain用来本地运行，proMain用来打包发布。proMain只打包router也就是业务部分代码，在proMain中通过window.bapp.registerApp把业务注入到子项目中。
那么需要注意的有两点：
1，主项目的main.js和子项目的devMain.js要保持一致，不然在线上的表现本地server的表现会不一致
2，主项目和子项目的mixin要保持一致
主项目和子项目的配置，感兴趣的可以到官方文档里看下。生成配置文件的json我们是用shell写的。当然node和Python都可以写，先粘下我们shell生成json部分
发布工具的话我们用的是jenkins，注意！！！每个子项目输出的文件名要和子项目中src/js/util.js中的projectKey一致，主项目是通过projectKey去查找子项目的静态资源的。
jenkins发布要把主项目和子项目 add scm，然后每个都选择check out to a sub-directory。当然本地都拉下来node也可以做同样的事，最终目的就是把主项目和子项目打包在一起。
感兴趣的同学可以关注接下来的两片文章，稍后会更新：
基于vue的前端微服务架构解决方案2-插件分离（传送门： juejin.cn/post/692302… ）
基于vue的前端微服务架构解决方案3-子项目优化（传送门： juejin.cn/post/692422… ）
