微前端qiankun项目实践系统-初始化

微前端就是类似后台的微服务，可以实现应用公共模块抽取，子应用之间交互优化等功能，合理利用团队资源，独立优化部署，降耦合，提升项目扩展性，好处挺多，但缺点是团队不是那么大，项目没有到一定体量的话，也没必要用的哈。

能实现微前端架构的技术有很多，像iframe, webcomponent,micro-app,single-spa,qiankun...

各有优缺点，经过比对呢，还是决定拿qiankun来练练手，不成想，初始化，就碰到了一些小问题
总结来说就是需要注意以下几点（重点声明，这个初始化暂时为开发环境配置，生产环境配置后面再总结 且技术栈为Vue.js）：

第一点：基座(主应用)
vue.config.js =>  publicPath这个配置项可以为/ 或 ./ ，这里会影响部署的时候，静态资源的路径
main.js => 引入 import { registerMicroApps, start } from 'qiankun' ，配置registerMicroApps时，注意如下几点：
1.container => app.vue 与 index.html 要有对应的id，请使用#id选择器 
2.name => 微应用的名字，最好与package.json中的name一致且保持唯一
3.entry => 微应用启动的服务，可以是localhost + 端口 或 ip + 端口 或 域名 + 端口 ，具体情况具体分析
4.activeRule => (1) 存在多个微应用的情况下，传参最好是string，不要是function，若是function可能会引发single-spa的32号报错(自行尝试即可知) 
(2) 要根据，基应用与子应用的路由配置来确定这里的匹配规则

第二点： 微应用

1.微应用的路由 
基应用与微应用都是hash，微应用就需要在路由中添加统一的前缀来实现匹配，全为hash的形式一个好处，就是微应用之间的跳转采用普通方式即可
基应用与微应用都是history，匹配基础是base配置，即微应用需要配置这个值且唯一，但这种方式会影响主微应用之间的跳转，要改用以下两种方式实现：
(1) history.pushState  (2) 将基应用的路由对象通过props进行传递
无论哪种方式，这里的路由配置都会影响到基应用注册微应用时的activeRule，一定要仔细处理这里