vue-qiankun公司微前端项稳定目落地后的总结(附github仓库demo,将会持续更新)
️本文为博客园社区首发文章,未获授权禁止转载
大家好,我是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 "\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
最后自己每天工作中的笔记记录仓库,主要以文章链接和问题处理方案为主。
vue-qiankun公司微前端项稳定目落地后的总结(附github仓库demo,将会持续更新)的更多相关文章
- 前端可视化项目流程,涉及three.js(webGL),3DMax技术,持续更新
最近在做一个可视化展示的项目,记录一下流程: 建模,模型来源,可以参考沙盘展示类项目,自己建模或者拼装其他源模型(本人以前是3D建模师,可以应付一些简单的场景) 有效模型导入到web端,这里采用的ob ...
- 前端文档汇总(含代码规范、开发流程、知识分享,持续更新) front-end-Doc
https://juejin.im/post/5b1205b1f265da6e1a602a62 https://juejin.im/post/5b1205b1f265da6e1a602a62 http ...
- 基于微前端qiankun的多页签缓存方案实践
作者:vivo 互联网前端团队- Tang Xiao 本文梳理了基于阿里开源微前端框架qiankun,实现多页签及子应用缓存的方案,同时还类比了多个不同方案之间的区别及优劣势,为使用微前端进行多页签开 ...
- 极致简洁的微前端框架-京东MicroApp开源了
前言 MicroApp是一款基于类WebComponent进行渲染的微前端框架,不同于目前流行的开源框架,它从组件化的思维实现微前端,旨在降低上手难度.提升工作效率.它是目前市面上接入微前端成本最低的 ...
- 「微前端实践」使用Vue+qiankun微前端方案重构老项目的本地验证
10月份换了新的工作,参与完一个月的需求迭代后,接到了项目重构的任务.简单来说,需要在短时间内提出方案设想,同时进行本地验证,最终需要拿出一套技术替换方案来.于是,埋头苦干了一个月,总算干了点成绩出来 ...
- 微前端框架 之 qiankun 从入门到源码分析
封面 简介 从 single-spa 的缺陷讲起 -> qiankun 是如何从框架层面解决 single-spa 存在的问题 -> qiankun 源码解读,带你全方位刨析 qianku ...
- 《OneForAll框架搭建之旅》前端篇:微前端架构设计(Vue)
心之所向,勇往直前!记录开发过程中的那些小事,给自己加点经验值. 前言 作为一个.Net后端开发,在竞争愈加激烈的当下,掌握点前端配菜好像已经是家常便饭了. 刚好在工作的第5个年头,辞去小主管职务的我 ...
- 【微前端】微前端最终章-qiankun指南以及微前端整体探索
序 这才2月中旬,广州就已经渐渐地进入了夏季,--夏天总是让人焦虑的.过年闲暇时间写下了微前端这系列的终章,欢迎拍砖.如果你习惯直接上手代码,不妨跳到实践一节,直接上代码教程玩一玩. qiankun原 ...
- 初步认识微前端(single-spa 和 qiankun)
初步认识微前端 微前端是什么 现在的前端应用,功能.交互日益复杂,若只由一个团队负责,随着时间的推进,会越来越庞大,愈发难以维护. 微前端这个名词,第一次提出是在2016年底.它将微服务(将单一应用程 ...
随机推荐
- V $ BACKUP_DATAFILE
V$BACKUP_DATAFILE 从控制文件显示有关备份集中的控制文件和数据文件的信息. 柱 数据类型 描述 RECID NUMBER 备份数据文件记录ID STAMP NUMBER 备份数据文件记 ...
- 特斯拉Tesla Model 3整体架构解析(下)
特斯拉Tesla Model 3整体架构解析(中) Tesla Computer Unit 特斯拉已经开发了一个由自动驾驶仪和信息计算机组成的定制"液冷双计算平台"."他 ...
- 解决redis集群版本不一致导致RDB同步失败的问题
某天,运维反馈某两个机房的出口流量和入口流量过大,并且持续了好一段时间. 再仔细排查后发现是 redis 集群的几台服流量问题,于是开始查日志. 在日志中发现出现大量的 Can't handle RD ...
- 面试热点|理解TCP/IP传输层拥塞控制算法
0x00.前言 通过本文你将了解到以下内容: 拥塞控制概念以及其背景 流量控制和拥塞控制的区别与联系 拥塞控制主要过程详解 伙伴们认真学习一下,让offer来得更猛烈些吧! 0x01.TCP/IP协议 ...
- 【模拟8.03】斐波那契(fibonacci) (规律题)
就是找规律,发现每个父亲和孩子的差值都是距儿子最大的fibonacc 也是可证的 f[i]表示当前月的兔子总数 f[i]=f[i-1]+f[i-2](f[i-2]是新生的,f[i-1]是旧有的) 然后 ...
- Perm 排列计数
题目描述 称一个1,2,...,N的排列P1,P2...,Pn是Magic的,当且仅当2<=i<=N时,Pi>Pi/2. 计算1,2,...N的排列中有多少是Magic的,答案可能很 ...
- open数据库报错ERROR at line 1: ORA-03113: end-of-file on communication channel Process ID: 3880 Session ID: 125 Serial number: 3
1.今天打开数据时,失败,报错 ERROR at line 1:ORA-03113: end-of-file on communication channelProcess ID: 3880Sessi ...
- 数据同步Datax与Datax_web的部署以及使用说明
一.DataX3.0概述 DataX 是一个异构数据源离线同步工具,致力于实现包括关系型数据库(MySQL.Oracle等).HDFS.Hive.ODPS.HBase.FTP等各种异构数据源之间稳定高 ...
- mysql的主从复制延迟问题--看这一篇就够了
在之前我们已经讲解了一主一从,双主双从的mysql集群搭建,在单机应用的时候看起来没有问题,但是在企业的生产环境中,在很多情况下都会有复制延迟的问题. 主从复制的原理我们在此处就不再赘述了,之 ...
- Mongo3基础操作
由于3.X的文档是在3.X当前最新版本前记录,所以这里列出一些常用的操作,比如建立库,删除库,等一些格式,然后在描述开启远程和创建用户的一些区别,以及讲解2.X和3.X配置文件区别. 1. Mongo ...