vue-qiankun公司微前端项稳定目落地后的总结(附github仓库demo,将会持续更新)
⚠️本文为博客园社区首发文章,未获授权禁止转载
大家好,我是aehyok🎋,一个住在深圳城市的佛系码农🧚🏻♀️,如果你喜欢我的文章📚,可以通过点赞帮我聚集灵力⭐️。
个人github仓库地址: https:github.com/aehyok
本文讲解微前端qiankun demo仓库地址 : https:github.com/aehyok/vue-qiankun 目前基于dev分支进行开发和测试
本demo已部署腾讯云 http://vue.tuokecat.com(服务器配置较低,如有访问比较慢,请耐心等待)
微前端的讲解概念和理论的文章非常多,这里我就不谈了,我讲的肯定没有他们好。同样的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 "\033[32m拉取项目:${project_path} 成功\033[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 "\033[32m编译项目:${npmbuild_pathArr[i]} 成功\033[0m";
done
#-------------------------4、 开始拷贝文件到服务器----------------------
# /e/work/aehyok/github/qiankun 是我本地打包后的文件夹
scp -r /e/work/aehyok/github/qiankun/main root@139.186.205.7:/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
最后自己每天工作中的笔记记录仓库,主要以文章链接和问题处理方案为主。