微前端项目技术改造方案

目录

• 背景：
• 目的：
• 效果：
• 原理：
• 改动：
• 部署（独立部署）：
• 开发（独立开发）：

背景：

目前前端项目有门户(pumpkin-vue-portal)，公有云(pumpkin-vue-cloud)和即将加入的商城(pumpkin-vue-mall)三个独立项目，但三者存在相同的头部，底部，登录用户权限也是同一套，
带来了如下业务痛点：
1.存在大量重复代码，不符合“kiss”准则
2.代码维护相当困难，加上要合并的分支，改一处相当于要维护n*3的代码量
3.框架代码没有与业务代码分开，核心的用户权限代码与业务代码绑定在一个项目内，无法保证对核心代码的可控性

目的：

将门户(pumpkin-vue-portal)，公有云(pumpkin-vue-cloud)，商城(pumpkin-vue-mall)三个项目共有的如头部，底部，登录，权限等逻辑进行抽离，抽离为pumpkin-fronted-framework框架项目，实现公有组件和公有逻辑的复用

效果：

1.门户(pumpkin-vue-portal)，公有云(pumpkin-vue-cloud)，商城(pumpkin-vue-mall)三个项目将只包含业务代码
2.子应用相互独立，互不影响，可分别进行部署和设置权限管理
3.主应用为框架和核心业务代码，可单独进行部署和权限控制
4.合并大量重复代码，利于维护

原理：

通过在主应用维护所有子应用的配置信息，包括路由规则、bundle 地址等，同时劫持了 window.history 相关的几个跳转事件，当捕获到页面跳转事件时，主应用会根据跳转的路由获取对应的子应用信息，然后跟之前的子应用信息进行对比，如果是同一个子应用，则什么都不做，如果是不同的子应用，则将前一个子应用的 bundle 卸载，同时加载新的子应用 bundle 资源，加载完成后子应用 bundle 会执行自身的渲染逻辑。

改动：

1. pumpkin-vue-portal和pumpkin-vue-cloud进行拆分重组为pumpkin-fronted-framework，pumpkin-vue-portal，pumpkin-vue-mall，pumpkin-vue-cloud四个项目，其中framework为主应用，框架项目；portal为子应用，门户项目；mall为子应用，商城项目；cloud为子应用，公有云项目。

2. 主应用的入口文件处进行子应用注册
   

3. 微应用入口文件导出相应生命钩子
   

4. 子应用打包方式修改

5. 子应用dev环境设置为可跨域
   

6. 将注册应用时所填写**规则填入路由初始化时的base
   

7. 原有的window.globalVue变为window.globalPortalVue，各自应用均改为window.global${子应用名}Vue,window.globalVue变为框架应用的vue实例

8. 常量$constant转为主应用定义，并绑定在window.$constant转为主应用定义，并绑定在window.constant上

9. Header，footer和首页index都被移至pumpkin-fronted-framework

10. 应用间通信使用@ice/stark-data的event和store，并删除了之前localStorage储存vuex的方式
    
    

原则：

①　在应用间使用的状态应注册为全局状态（globalStore.set） ②　项目中的使用依然通过vuex
③　全局状态更改的同时需要同步更新对应的vuex状态（globalStore.on(‘xxx’,()=>{store.commit()})）
④　对于要修改一系列状态的操作使用event.on进行监听，并使用globalStore.set进行改变
⑤　应用间通过event.emit进行触发event.on操作

11. 子应用本身的路由router对象使用方法不变，应用间的跳转需要使用location.href同时带上子应用的**路径，如location.href=/portal/${该应用的路由path}
12. Iconfont.js只需要在主应用中导入一次即可，子应用的iconfont将不会生效

部署（独立部署）：

1. 拆分成微前端后，各应用均可以独立进行部署，打包命令均不变
2. 服务器的访问路径下新建fronted文件夹，并在其中新建appPortal，appCloud和appMall三个子目录
3. pumpkin-fronted-framework项目进行打包，将打包后dist目录下的所有文件移动至fronted文件夹下
4. 将门户(pumpkin-vue-portal)，公有云(pumpkin-vue-cloud)，商城(pumpkin-vue-mall)三个项目分别打包后各自生成的dist目录下所有文件移动至对应的appPortal，appCloud和appMall下
5. 每次代码提交打包后，先删除对应应用的打包文件目录下的所有文件，然后将打包的文件移至目录下。主应用打包后需要将fronted目录下的对应打包文件先删除然后再将新的打包文件进行移动

开发（独立开发）：

1. 打开dev环境地址
2. 通过手动设置localStorage中manualApp的值加载单独的项目开发环境
3. 规则如下：

(1)portal,cloud,mall对应三个子应用的本地开发环境
(2)若值为字符串，则主应用将依次加载填入的子应用值，用,隔开，端口号从8081依次增加1

(3)若值为JSON字符串，将在加载时进行转换，key为对应子应用值，value为端口号，与当前所启项目端口号对应即可