vue-qiankun公司微前端項穩定目落地后的總結（附github倉庫demo，將會持續更新）

⚠️本文為博客園社區首發文章，未獲授權禁止轉載

大家好，我是aehyok🎋，一個住在深圳城市的佛系碼農🧚🏻‍♀️，如果你喜歡我的文章📚，可以通過點贊幫我聚集靈力⭐️。

個人github倉庫地址： https:github.com/aehyok

本文講解微前端qiankun demo倉庫地址 ： https:github.com/aehyok/vue-qiankun 目前基於dev分支進行開發和測試

本demo已部署騰訊雲 http://vue.tuokecat.com（服務器配置較低，如有訪問比較慢，請耐心等待）

微前端的講解概念和理論的文章非常多，這里我就不談了，我講的肯定沒有他們好。同樣的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
最后自己每天工作中的筆記記錄倉庫，主要以文章鏈接和問題處理方案為主。