Vue3+微前端(qiankun)实现样例

基本信息

该样例是全面使用vue3的一个框架结构，即主应用、子应用都是基于vue3创建的工程。
子应用没有使用多框架是因为官网及其他渠道已经有相应的例子，此次文章重点关注对qiankun框架的使用

效果展示

实现

默认已安装 qiankun 的包, npm install qiankun, 话不多说直接开始

主应用(main-app)

• 创建主应用
• 修改主应用的 main.js 文件(src/main.js)
  • name:对应子应用的项目名称
  • entry：子应用的运行地址(npm run serve自动分配的地址，可手动修改)
  • container：子应用需要在主应用中挂载的dom
  • activePule：当路由修改为 /vue1-app 时,对应子应用生效。
  • props：子应用生效时，传进去的参数
  • 之后的生命周期函数为子应用生效时的回调

• 主应用的App.vue

子应用(vue1-app)

• 在主应用的工程中直接创建子应用(这里直接创建了2个)
• 修改子应用的 main.js,两个子应用的原理一样,另一个如法炮制即可
  • 坑1: 需要在子应用的mian.js同级目录下创建public-path.js文件，并在main.js中引入
  • 坑2: 需要手动在此文件中创建router，router文件中的routers里的path也需要修改，即主应用中的activePule为默认初始路由，且都要添加上子应用的前缀(子应用为vue1-app,故前缀为vue1-app)
  • 坑3: 官网的vue2做的示例, vue3中官方已经明确生命周期destory函数不希望开发者使用,已被删除并改名为onUnmouted，我这里用的bind创建了属性(因为我没找到如何在vue3中优雅的调用destory)
  • 坑4: vue.config.js 的配置
  • 坑5: 子应用的app.vue文件中的路由跳转修改(router-link)

运行

至此，两个子应用全部按照相同原理修改完毕
在主应用中npm run serve--->8081
进入子应用中 npm run serve ---> vue1:8082 vue2:8083