vue-qiankun公司微前端项稳定目落地后的总结(附github仓库demo,将会持续更新)

  • A+
所属分类:Web前端
摘要

⚠️本文为博客园社区首发文章,未获授权禁止转载大家好,我是aehyok?,一个住在深圳城市的佛系码农??‍♀️,如果你喜欢我的文章?,可以通过点赞帮我聚集灵力⭐️。


⚠️本文为博客园社区首发文章,未获授权禁止转载

大家好,我是aehyok?,一个住在深圳城市的佛系码农??‍♀️,如果你喜欢我的文章?,可以通过点赞帮我聚集灵力⭐️。

个人github仓库地址: https:github.com/aehyok

本文讲解微前端qiankun demo仓库地址 : https:github.com/aehyok/vue-qiankun 目前基于dev分支进行开发和测试

本demo已部署腾讯云 http://139.186.205.7:8080/(服务器配置较低,如有访问比较慢,请耐心等待)

微前端的讲解概念和理论的文章非常多,这里我就不谈了,我讲的肯定没有他们好。同样的github上的demo也非常多,然后我在公司项目引入时还是发现了许多问题,可能是时间太过于仓促,在github上clone下来的demo就真的是demo级别,根本谈不上应用。于是乎,我在公司微前端项目稳定了一段时间后,对qiankun乾坤微前端项目进行了简单的整理,特此发文进行记录,以及让更多入门的程序yuan们,在接触qiankun乾坤微前端框架时能够更快速的找到问题所在。

首先说一下,qiankun微前端在公司应用中解决了那些问题

  • 1、项目大了之后改动一处便要将前端项目进行全部打包,而且打包时长有时候都可以喝一杯咖啡了。

  • 2、多人协作,无论使用的什么框架都可以进行接入,react、vue、angular、jQuery、原生JS,由于公司有人比较喜欢使用原生JS,主要是历史悠久,封装了一套原生的JS库。

  • 3、经常性的出现git提交代码发生冲突的问题,主要是解决合并代码解决冲突的能力不够,对git只会常用操作。

使用之后的感受

  • 1、哪里有问题需要进行变更改动,便打包那个子系统即可。(当然也存在都要进行打包的情况,比如新增需求等等)

  • 2、每个子系统可独立发挥团队中每个人的优势,使用自己熟悉的框架进行快速开发。

  • 3、发生冲突的概率小了,不能说不存在了,同一个子系统有时候也是多个人一起协作的。还是要从根本上解决自身问题,使用git解决代码冲突的能力。


当前项目目录如下(暂时抛弃其他没有使用到的文件和文件夹)

├── common/                # 存放共用的工具库 ├── components/            # 存放公共的组件库 ├── main-vite-app-ts/      # 存放主应用 main-vite-app-ts 的文件夹 |── webpack-app/           # 存放微应用 webpack-app 的文件夹 |── map-app/               # 存放微应用 map-app 的文件夹 |——.....                   # 后续添加使用之后,再进行对应的补充 |——qiankun.conf            # 项目部署的nginx基础配置文件 |——build.sh                # 通过脚本对主应用和子应用进行统一的打包 

1、main-vite-app-ts 主应用开发环境启动后的访问地址 http://localhost:1000

  • 使用 Vue3 + Vite2 +TypeScript + Element Plus 搭建

  • vite2一款新的打包工具,打包的时候真的就比webpack要快,尤其是开发环境中,但毕竟是一个新的工具,目前还有非常多的缺陷

  • 目前用于qiankun的限制,子应用使用vite2进行打包没那么方便,故只在主应用中使用vite2,待qiankun乾坤更新后再使用到子应用中

  • 主要负责搭建项目的整体布局,顶部导航栏和左侧菜单列表,以及登录页面等404通用页面布局

  • 负责子应用的注册引入和管理(可动态管理子应用)

2、webpack-app 微应用开发环境启动后的访问地址 http://localhost:4000

  • 使用 Vue3 + webpack + Element Plus 搭建

  • 引用自己封装的组件 aehyok-form-vue3 进行demo页面的初始化,包括动态form表单和动态table列表,以及json阅读器

  • 根据json配置对象直接生成动态form表单,目前已经完成基本架构,待有时间继续完善细节

  • 根据son配置对象直接生成动态table列表,目前刚刚开始,很多功能还需要调整,已经在公司项目中使用,后期可能存在重构的情况,持续完善中

  • 使用ffmpeg通过webassembly对视频进行前端转码功能的实现,目前demo可以查看,具体细节功能待后续完善

3、map-app 微应用开发环境启动后的访问地址 http://localhost:5000

  • 使用 Vue3 + webpack + Element Plus +TypeScript 搭建

  • 使用leaflet展示地图并对基本图层进行处理

  • 使用leflet-geoman处理点坐标和多边形坐标组的编辑

  • 同时在该微应用项目中正在尝试vue3的hooks(学习中)

4、common 公用方法库

使用方法:通过在文件上import 相对路径的方式引入

  • 封装常用element-plus弹窗

  • 封装请求 axios(准备使用typescript)

  • 封装常用表单验证字段列表

  • 封装常用字符串处理、数组处理、等等

  • 封装常用日期转换、以及日期格式等

  • 封装常用cookie、locaStorage、Web Sql 存储

  • 封装一些常用的算法

5、components 共用组件库

使用方法:通过在文件上import 相对路径的方式引入(qiankun乾坤共享组件这块还不成熟,可参考webpack5中联邦模块 Module Federation)

  • 动态form表单生成器(已单独抽离到npm发包,具体可查看aehyok-form-vue3)

  • 动态table表单生成器(已单独抽离到npm发包,具体可查看aehyok-form-vue3)

  • 文件上传组件

  • 下拉树组件

  • 富文本编辑组件

  • 等等,日常中使用的各种可复用的组件

6、项目线上部署前的打包(通过脚本批量进行编译打包:项目根目录build.sh打包脚本)

通过 sh build.sh 执行脚本(如有使用请进行调节各个目录)当然你可以使用其他自动化的各种工具

  ## 1、当前脚本文件所在路径   current_path=$(cd $(dirname $0); pwd)   version='V0.1.0.0012'    ## 打印当前目录   echo $current_path    # 打印当前目录文件列表   # echo $a*     #-----------------------------1、需要拉取的项目路径------------------    ## 项目仓库本地文件路径   base_url ='/e/work/aehyok/github/vue-qiankun'    ## 开始pull拉取项目   project_path=${base_url}   cd $project_path   git pull     echo -e "33[32m拉取项目:${project_path} 成功33[0m";     #-------------------------2、设置需要编译的项目路径----------------------   npmbuild_pathArr=(     "/e/work/aehyok/github/vue-qiankun/main-vite-app-ts"    #主应用     "/e/work/aehyok/github/vue-qiankun/webpack-app"         # webpack-app 子应用     "/e/work/aehyok/github/vue-qiankun/map-app"             #map-app 子应用   )    #-------------------------3、 开始 build 项目--------------------------   for ((i=0;i<${#npmbuild_pathArr[*]};i++))   do     project_path=${npmbuild_pathArr[i]}     cd $project_path     yarn build     echo -e "33[32m编译项目:${npmbuild_pathArr[i]} 成功33[0m";   done    #-------------------------4、 开始拷贝文件到服务器----------------------   # /e/work/aehyok/github/qiankun 是我本地打包后的文件夹   scp -r /e/work/aehyok/github/qiankun/main [email protected]:/usr/local/qiankun/main/      ######、拷贝完之后进行git 的提交   cd /e/work/aehyok/github/qiankun   ## git add .   ## git status   ## sleep 1s   ## message="chore:build.sh 脚本打包 commit-version:${version}"   ## git commit -m $message .   ## git push origin    echo "5秒后将自动退出本脚本:"   for i in $(seq 5 -1 1)   do     echo -e $i;sleep 1   done   exit    ## 执行脚本  sh build.sh 

7、打包和部署(仓库根目录qiankun.conf)

  • 目前自己的项目部署在腾讯云上,通过nginx进行承载,灰常之方便

      server {           listen 8080;           server_name localhost;           location / {               root  /usr/local/qiankun/main/;               index index.html;            }       }  
  • 主应用部署在一级目录模式为 hash模式,子应用部署在二级目录模式也为 hash

  • 目前主要是一个主应用和两个微应用,打包后部署目录结构如下

    └── main/ # 根文件夹
    |
    ├── child/ # 存放所有微应用的文件夹
    | ├── webpack-app/ # 存放微应用 webpack-app 的文件夹
    | ├── map-app/ # 存放微应用 map-app 的文件夹
    ├── index.html # 主应用的index.html
    ├── css/ # 主应用的css文件夹
    ├── js/ # 主应用的js文件夹


后续迭代更新计划

上面说的应该都是demo中已经有的,或者正在进行优化中的。下面说的将会是继续优化,或者是将来有时间可能要做的一些思考吧。下面列举的是将要做,或者未来要做的(可能工作中如果有用到的进度就会在哪里,慢慢优化实践)

  • 1、管理子系统模块的功能(目前数据全部通过接口获取)

  • 2、管理子系统菜单的功能(目前数据为静态的配置文件)

  • 3、管理授权的功能

  • 4、管理下拉列表数据的字典功能

  • 5、优化form表单生成器

  • 6、优化table列表生成器

  • 7、优化leaflet和geoman编辑图层的功能

  • 8、cesium.js 实现2.5d或者3d地图可视化的功能

  • 9、低代码和无代码工具的思考和实践

  • 10、后期考虑接入后端api(java、nodejs或者.net core),对数据进行管理(目前通过rap2进行模拟api数据只能读)

  • 11、大后期前后端一起考虑做一些从前端到后端一起减少工作量的封装

  • 12、考虑子应用也可以单独登录、单独运行,添加一个模板。

目前本项目所使用的一些常用开源框架如下

├── aehyok-form-vue3       #  自己封装的json表单生成器,JSON Table列表生成器、JSON阅读器 架构已有,待优化细节 ├── qiankun                #  微前端搭建框架,在主应用中 ├── leaflet and geoman     #  web地图展示和编辑图层的组件,在map-app子应用中 ├── rap2                   #  本项目静态数据都放到了rap2中,作为一个api数据提供者,很方便 ├── swiper                 #  可实现很多效果的轮播图 ├── @ffmpeg/ffmpeg         #  视频转码工具可通过wasm调用 ├── swiper                 #  可实现很多效果的轮播图 ├── vuex-persistedstate    #  针对vuex 进行缓存设置 ├── v-contextmenu          #  鼠标右键事件触发弹窗  ├── jsoneditor             #  json阅读编辑器  ├── ......后续慢慢写进来 

目前使用qiankun框架过程中,遇到的一些问题

  • 1、主应用中引入qiankun 乾坤框架,注意主应用注册微应用、加载微应用的时机,vue中应该在mounted或者onMounted中执行start(),要不然可能找不到我们定义的dom节点,因为页面还没有进行加载。

  • 2、子应用中引入百度地图如果升级无法解决,建议将地图放到主应用加载,微应用也引入这个地图 js(独立运行时使用),但是给 script 标签加上 ignore 属性。

  • 3、目前登录后的认证状态,存储在localStorage中,可实现主应用和子应用中共享访问缓存

  • 4、子应用中的返回上一页的调用无法使用vue3 路由中的 router.go(-1) ,需要使用window.history.go(-1), 待查看源码查证问题

  • 5、微应用打包之后 css 中的字体文件和图片加载 404 --建议查看https://qiankun.umijs.org/zh/faq#%E5%BE%AE%E5%BA%94%E7%94%A8%E6%89%93%E5%8C%85%E4%B9%8B%E5%90%8E-css-%E4%B8%AD%E7%9A%84%E5%AD%97%E4%BD%93%E6%96%87%E4%BB%B6%E5%92%8C%E5%9B%BE%E7%89%87%E5%8A%A0%E8%BD%BD-404

  • 6、qiankun 将会自动隔离微应用之间的样式(开启沙箱的情况下),start方法中会有对应的参数设置


最后的最后

https://github.com/aehyok/vue-qiankun
本文中不涉及到代码,有关代码问题可以访问文章开头的微前端github demo 仓库,github仓库将会保持持续更新,不断优化小demo。

https://github.com/aehyok/vue3-ele-form
同时对json数据配置生成动态form表单和table列表也会持续优化,目前刚刚在公司项目中尝试,等机会合适可能就让同事一起参与进来。

https://github.com/aehyok/2021
最后自己每天工作中的笔记记录仓库,主要以文章链接和问题处理方案为主。