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

前端佈局總結（持續更新）
2018-04-13
前端
Git 常用命令總結，將會持續更新
2021-05-06
Git
前端演算法類面試總結(持續更新...)
2019-02-27
前端演算法面試
前端面試題總結——HTML(持續更新中)
2019-06-18
前端面試題HTML
前端面試經典題目彙總（持續更新中）
2019-02-16
前端面試
【前端面試】Vue面試題總結(持續更新中)
2022-07-17
前端Vue面試題
陣列總結，持續更新～
2018-06-20
陣列
CSS日常踩坑後的總結（猜測你也會遇到的，持續更新。。。）
2021-09-09
CSS
Android 常用開源庫總結（持續更新）
2019-03-07
Android
前端面試題總結——Html5（持續更新中）
2019-06-18
前端面試題HTML
前端面試題總結——綜合問題(持續更新中)
2019-02-16
前端面試題
前端知識點總結——JS高階（持續更新中）
2019-02-16
前端JS
前端程式設計輔助網站彙總（將持續更新）
2018-04-27
前端程式設計網站
javaScript 習題總結(持續更新)
2018-05-06
JavaScript
前端面試的一些題目(持續更新中)
2019-03-20
前端面試
前端學習資源彙總（持續更新）
2018-12-09
前端
PHP面試題總結-持續更新中
2021-07-20
PHP面試題
Jquery 方法--自己總結持續更新-1
2017-02-26
jQuery
Teradata 錯誤總結（持續更新。。。）
2014-03-09
4W字的後端面試知識點總結（持續更新）
2020-06-29
後端面試
移動端經驗總結(持續更新)
2017-03-03
前端知識點(持續更新)
2019-04-02
前端
前端程式碼集合（持續更新）
2021-10-09
前端
前端面試題總結(陸續更新.......)
2019-12-09
前端面試題
springMVC簡單demo集合（持續更新中……）
2020-12-02
SpringMVC
Android學習資源大全集彙總（github持續更新）
2016-04-28
AndroidGithub
Dom中高big 事件總結（持續更新中）
2019-01-12
事件
面試心得與總結-——答案整理_4 持續更新
2016-08-22
面試
總結幾個ORACLE資料庫日常運維常用的命令（持續更新）
2016-03-15
Oracle資料庫運維
LeetCode Animation 題目圖解彙總(持續更新中...)
2018-12-06
LeetCode圖解
學習 Laravel —— 前端篇（持續更新）
2019-10-05
Laravel前端
前端面試問題（持續更新）
2017-09-22
前端面試
最簡單地將GitHub專案更新到本地倉庫
2020-10-16
Github
微前端如何落地？
2019-08-14
前端
PHP學習路線資源總結[持續更新]
2021-04-12
PHP
前端常用的 59 個工具類【持續更新】
2019-12-03
前端
分享（四）：免費可用的 API 大全總結（持續更新中）
2023-04-10
API
自動解析 github倉庫的目錄列表
2019-03-02
Github