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

大家好,我是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,将会持续更新)的更多相关文章

  1. 前端可视化项目流程,涉及three.js(webGL),3DMax技术,持续更新

    最近在做一个可视化展示的项目,记录一下流程: 建模,模型来源,可以参考沙盘展示类项目,自己建模或者拼装其他源模型(本人以前是3D建模师,可以应付一些简单的场景) 有效模型导入到web端,这里采用的ob ...

  2. 前端文档汇总(含代码规范、开发流程、知识分享,持续更新) front-end-Doc

    https://juejin.im/post/5b1205b1f265da6e1a602a62 https://juejin.im/post/5b1205b1f265da6e1a602a62 http ...

  3. 基于微前端qiankun的多页签缓存方案实践

    作者:vivo 互联网前端团队- Tang Xiao 本文梳理了基于阿里开源微前端框架qiankun,实现多页签及子应用缓存的方案,同时还类比了多个不同方案之间的区别及优劣势,为使用微前端进行多页签开 ...

  4. 极致简洁的微前端框架-京东MicroApp开源了

    前言 MicroApp是一款基于类WebComponent进行渲染的微前端框架,不同于目前流行的开源框架,它从组件化的思维实现微前端,旨在降低上手难度.提升工作效率.它是目前市面上接入微前端成本最低的 ...

  5. 「微前端实践」使用Vue+qiankun微前端方案重构老项目的本地验证

    10月份换了新的工作,参与完一个月的需求迭代后,接到了项目重构的任务.简单来说,需要在短时间内提出方案设想,同时进行本地验证,最终需要拿出一套技术替换方案来.于是,埋头苦干了一个月,总算干了点成绩出来 ...

  6. 微前端框架 之 qiankun 从入门到源码分析

    封面 简介 从 single-spa 的缺陷讲起 -> qiankun 是如何从框架层面解决 single-spa 存在的问题 -> qiankun 源码解读,带你全方位刨析 qianku ...

  7. 《OneForAll框架搭建之旅》前端篇:微前端架构设计(Vue)

    心之所向,勇往直前!记录开发过程中的那些小事,给自己加点经验值. 前言 作为一个.Net后端开发,在竞争愈加激烈的当下,掌握点前端配菜好像已经是家常便饭了. 刚好在工作的第5个年头,辞去小主管职务的我 ...

  8. 【微前端】微前端最终章-qiankun指南以及微前端整体探索

    序 这才2月中旬,广州就已经渐渐地进入了夏季,--夏天总是让人焦虑的.过年闲暇时间写下了微前端这系列的终章,欢迎拍砖.如果你习惯直接上手代码,不妨跳到实践一节,直接上代码教程玩一玩. qiankun原 ...

  9. 初步认识微前端(single-spa 和 qiankun)

    初步认识微前端 微前端是什么 现在的前端应用,功能.交互日益复杂,若只由一个团队负责,随着时间的推进,会越来越庞大,愈发难以维护. 微前端这个名词,第一次提出是在2016年底.它将微服务(将单一应用程 ...

随机推荐

  1. V $ BACKUP_DATAFILE

    V$BACKUP_DATAFILE 从控制文件显示有关备份集中的控制文件和数据文件的信息. 柱 数据类型 描述 RECID NUMBER 备份数据文件记录ID STAMP NUMBER 备份数据文件记 ...

  2. 特斯拉Tesla Model 3整体架构解析(下)

    特斯拉Tesla Model 3整体架构解析(中) Tesla Computer Unit 特斯拉已经开发了一个由自动驾驶仪和信息计算机组成的定制"液冷双计算平台"."他 ...

  3. 解决redis集群版本不一致导致RDB同步失败的问题

    某天,运维反馈某两个机房的出口流量和入口流量过大,并且持续了好一段时间. 再仔细排查后发现是 redis 集群的几台服流量问题,于是开始查日志. 在日志中发现出现大量的 Can't handle RD ...

  4. 面试热点|理解TCP/IP传输层拥塞控制算法

    0x00.前言 通过本文你将了解到以下内容: 拥塞控制概念以及其背景 流量控制和拥塞控制的区别与联系 拥塞控制主要过程详解 伙伴们认真学习一下,让offer来得更猛烈些吧! 0x01.TCP/IP协议 ...

  5. 【模拟8.03】斐波那契(fibonacci) (规律题)

    就是找规律,发现每个父亲和孩子的差值都是距儿子最大的fibonacc 也是可证的 f[i]表示当前月的兔子总数 f[i]=f[i-1]+f[i-2](f[i-2]是新生的,f[i-1]是旧有的) 然后 ...

  6. Perm 排列计数

    题目描述 称一个1,2,...,N的排列P1,P2...,Pn是Magic的,当且仅当2<=i<=N时,Pi>Pi/2. 计算1,2,...N的排列中有多少是Magic的,答案可能很 ...

  7. 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 ...

  8. 数据同步Datax与Datax_web的部署以及使用说明

    一.DataX3.0概述 DataX 是一个异构数据源离线同步工具,致力于实现包括关系型数据库(MySQL.Oracle等).HDFS.Hive.ODPS.HBase.FTP等各种异构数据源之间稳定高 ...

  9. mysql的主从复制延迟问题--看这一篇就够了

    ​ 在之前我们已经讲解了一主一从,双主双从的mysql集群搭建,在单机应用的时候看起来没有问题,但是在企业的生产环境中,在很多情况下都会有复制延迟的问题. ​ 主从复制的原理我们在此处就不再赘述了,之 ...

  10. Mongo3基础操作

    由于3.X的文档是在3.X当前最新版本前记录,所以这里列出一些常用的操作,比如建立库,删除库,等一些格式,然后在描述开启远程和创建用户的一些区别,以及讲解2.X和3.X配置文件区别. 1. Mongo ...