vue-qiankun公司微前端項穩定目落地後的總結(附github倉庫demo,將會持續更新)

aehyok發表於2021-07-20

⚠️本文為部落格園社群首發文章,未獲授權禁止轉載

大家好,我是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
最後自己每天工作中的筆記記錄倉庫,主要以文章連結和問題處理方案為主。

相關文章