2021-07-20

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

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

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

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

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

本demo已部署腾讯云 id="首先说一下，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 主应用开发环境启动后的访问地址 Vue3 + Vite2 +TypeScript + Element Plus 搭建

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

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

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

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

    • 2、webpack-app 微应用开发环境启动后的访问地址 Vue3 + webpack + Element Plus 搭建

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

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

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

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

    • 3、map-app 微应用开发环境启动后的访问地址 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中已经有的，或者正在进行优化中的。下面说的将会是继续优化，或者是将来有时间可能要做的一些思考吧。下面列举的是将要做，或者未来要做的（可能工作中如果有用到的进度就会在哪里，慢慢优化实践）

    Posted by at

    No comments:

    Post a Comment

    Subscribe to: Post Comments (Atom)