基于qiankun微前端和nginx实现的动态热部署微前端的实现

需求场景：前端项目中遇到多个模块是不同的组开发实现的（基于vue2）。领导也要求后期的前端页面不在主前端项目里开发，尽量使用qiankun微前端开发，然后集成在项目中，上传至服务器实现热更新。主要是为了避免某个模块的功能页面异常影响整个前端。

 qiankun微前端官网 文中涉及到的一些乾坤的知识点，阅读这篇文章的前提的大家已经了解并使用了qiankun框架来开发子应用。同时还涉及部分nginx代理的相关知识。nginx的部分配置详细

实现这种动态热更新部署的思路：

1、子前端应用的路由使用history模式，且路由的base是由主前端应用传过来的，对应每个微应用属性中的activeRule。

2、为每个子应用项目添加固定前缀的项目打包目录名，例如我使用的前缀是“microApp-”。这样该子应用的资源访问都是以microApp-××开头的。

 3、前端项目部署在服务器上，使用nginx代理请求。在nginx的配置文件中增加通用的以microApp-开头的location匹配。

 4、开发一个微应用管理页面，包括新增编辑删除和上传功能。其中的路由对应qiankun子应用的里面的activeRule，目录地址对应qiankun子应用的entry,编码对应其name。

 5、在主应用的qiankun.js中加上接口获取微应用列表的方法，然后传递props,最后注册启动微应用。

 registerAndStart()方法内部是调用qiankun的方法

 6、在使用qiankun的页面中调用步骤五的方法，完成微前端的启动

 由此每次新增或更新某个微前端子应用就可以通过管理页面上传子应用包，配置好activeRule和entry就好了，无需更新主前端包。