『壹』 qiankun 微前端應用實踐與部署（四）
一般情況下，我們對應用進行配置打包，要對圖片字體等資源進行下面配置，使得資源路徑正常載入。但是，在微前端模式下，子應用打包部署後，往往會出現子應用 css 文件裡面引入資源路徑載入失敗的問題，下面就讓我們來探究一下。
👉 獨立應用下的 url-loader 配置：
因為 url-loader 的 options 項的屬性 publicPath 屬性默認是 '' ，表示相對路徑，即打包出來的資源引用 url 都會加上相對路徑尋找 static 靜態資源入口，比如：
所有應用編譯打包部署後，當主應用載入子應用，子應用載入自身的 css 文件樣式時，由於 其對應的 css 文件裡面的圖片 url 引用是相對路徑，會出現子應用的資源相對路徑拼接主應用 domain 的情況，即子應用的 ../../static/img/bg_header.790a94f4.png 會在主應用的 domain 下進行資源的尋找，導致載入失敗 404 的情況。
如果項目有用到第三方庫，比如 element-ui ，那麼就更有必要進行處理了。因為 element-ui 的字體圖標是在 css 裡面引入的，還有相關背景圖片的引入也是在 css 里，所以需要配置 webpack 的 url-loader ，生產模式情況下直接指定資源前綴，使之成為絕對路徑。
這樣配置後，打包出來的 css 樣式文件會變成：
資源是絕對路徑，就不會出現上面子應用資源載入失敗的情況。
但是，這種前端配置文件寫死路徑的做法靈活性並不好，比如不能做到編譯一次，任意部署，因為路徑寫死，所以如果需要部署到其他伺服器的話，就需要重新編譯了。
接下來，講的是實現靈活部署的方案。
我們在只編譯打包一次前端應用的前提下，為了實現靈活部署，需要藉助 nginx 來實現。
下面以 vue-cli 3 的配置為例，與 vue-cli 2 只是寫法上的區別，其他都一樣。
假設主應用部署地址是 192.168.2.192 ，子應用的部署地址是 192.168.2.192:7102 。
打包編譯部署後，子應用的 css 文件裡面的圖片資源引用 url 如下：
主應用載入子應用的時候，子應用的資源拼接主應用 domian 後，子應用的 css 文件裡面的圖片資源載入路徑 url 就會變成：
此時的關鍵就是要訪問到子應用的資源，而不是去主應用資源目錄去找。
所以我們採用 nginx 路徑代理轉發埠的方案，當應用訪問 192.168.2.192/live 這個路徑時，經過 nginx 進行路徑代理轉發配置，轉發到子應用埠。
配置 nginx 代理規則：
此時真正訪問的資源路徑（子應用資源路徑）是：
👋 至此，通過修改配置 url-loader 的 publicPath 以及配置 nginx 的路徑代理轉發，就可以實現編譯打包一次，到處部署的目的。
『貳』 qiankun 實戰（一）
前兩天用了一下微前端框架 icestark , 在實際架構搭建過程中發現中發現在 Vue 主應用子應用之間切換 tag （tag 分別主應用和子應用的頁面）頁簽時會有子應用數據狀態無法保存的情況，搜索了一波解決方案後發現， icestark 中 React 應用實現了對數據狀態的緩存， Vue 裡面沒有這個實現。
React 實現的思路是通過 Tabs 組件結合 icestark 實現的一種機制，但是沒有用到路由。由於架構時間有限，發現按照那個方案調整是實現方面時間代價有點大，嘗試了一下 qiankun 發現框架中可以不存在這個問題，所以決定更換微前端框架方案為 qianun 。
如果想了解 icestark 可以看如下文章, 裡面有一些關於微前端架構理念的思考
快速上手微前端框架 icestark （一）
快速上手微前端框架 icestark （二）
本地使用 vue-cli 創建了一個 Vue2.0 純凈項目作為主應用，執行 yarn add qiankun 命名安裝 qiankun ，在 main.js 中引入 qiankun , 注冊並啟動
安裝 vue-router 時遇到一個版本兼容問題，通過 npm install vue-router --save 命令安裝會提示版本不兼容，如下效果
提示版本不兼容，如果通過控制台提示執行 npm install vue-router --save --force 或 npm install vue-router --save --legacy-peer-deps 可以安裝 vue-router ，但是在 Vue 項目中使用時會有無法正確引入的異常
因為默認安裝的 vue-router 是4.0大版本和現在的 vue 版本不兼容，要麼升級 vue , 要麼降級 vue-router ，公司前端團隊技術棧定的 Vue2.0 版本，果斷降級 vue-router , 安裝時 vue-router 時指定一個3.0的版本就行了, 執行 npm install [email protected] --save 命令即可。
src 目錄創建 public-path.js 文件，如果項目 lint 校驗不通過需要添加 /* eslint-disable */
修改 main.js 文件, 引入 public-path , 添加 qiankun 配置
修改 vue.config.js 文件中的打包配置
這時子應用的配置就添加好了
Vue 子應用的 @vue/cli-xxx 依賴不能為 5.0 版本，當前配置下導致無法單獨運行子應用。如果是安裝的最新 vue-cli 腳手架創建的項目最好看一下 @vue/cli-xxx 相關版本。
『叄』 微前端 -- 乾坤（一）
在 toB 的前端開發工作中，我們往往就會遇到如下困境：
基座模式
通過一個主應用，來管理其它應用。設計難度小，方便實踐，但是通用度低。
自組織模式。應用之間是平等的，不存在相互管理的模式。設計難度大，不方便實施，但是通用度高。
就當前而言，基座模式實施起來比較方便，方案也是蠻多的。
注冊表模式
和微服務架構相似，不論是哪種微前端方式，都需要有一個應用注冊表的服務。這個應用注冊表擁有每個應用及對應的入口，即路由。
它可以是一個固定值的配置文件，如 JSON 文件，又或者是一個可動態更新的配置，又或者是一種動態的服務。
作用：
應用注冊。即提供新的微前端應用，向應用注冊表注冊功能。
應用發現。讓主應用可以尋找到其它應用。
首先看一下它的用法：
https://qiankun.umijs.org/zh/guide/getting-started
微前端每個應用都擁有自己的生命周期：
bootstrap， 只會在微應用初始化的時候調用一次，下次微應用重新進入時會直接調用 mount 鉤子，不會再重復觸發 bootstrap。 通常我們可以在這里做一些全局變數的初始化，比如不會在 unmount 階段被銷毀的應用級別的緩存等。
Mount，應用每次進入都會調用 mount 方法，通常我們在這里觸發應用的渲染方法
Unload，刪除應用的生命周期
Unmount，應用每次 切出/卸載 會調用的方法，通常在這里我們會卸載微應用的應用實例
乾坤，作為一款微前端領域的知名框架，其建立在single-spa基礎上。相較於single-spa，乾坤做了兩件重要的事情，其一是載入資源，第二是進行資源隔離。而資源隔離又分為Js資源隔離和css資源隔離.
每個微應用對全局的影響都會局限在微應用自己的作用域內。比如 A 應用在 window 上新增了個屬性 test，這個屬性只能在 A 應用自己的作用域通過 window.test 獲取到，主應用或者其他應用都無法拿到這個變數。
1、快照沙箱
2、支持多應用的代理沙箱
💪 HTML Entry 接入方式，讓你接入微應用像使用 iframe 一樣簡單。
在使用 single-spa 載入微應用時，我們載入的不是微應用本身，而是微應用導出的 JS 文件，即JS Entry。
要接入一個微應用，就需要對微應用進行一系列的改造，然而 JS Entry 的問題就出在這兒，改造時對微應用的侵入行太強，而且和主應用的耦合性太強。
微應用改造一般分為三步：
l 微應用路由改造，添加一個特定的前綴
l 微應用入口改造，掛載點變更和生命周期函數導出
在js文件的入口中會導出一個對象，這個對象上有 bootstrap、mount、unmount 這三個接入 single-spa 框架必須提供的生命周期方法，其中 mount 方法規定了微應用應該怎麼掛載到主應用提供的容器節點上。
l 打包工具配置更改
侵入型強其實說的就是第三點，更改打包工具的配置，使用 single-spa 接入微應用需要將微應用整個打包成一個 JS 文件，發布到靜態資源伺服器，然後在主應用中配置該 JS 文件的地址告訴 single-spa 去這個地址載入微應用。這就導致常見的打包優化基本上都沒了，比如：按需載入、首屏資源載入優化、css 獨立打包等優化措施。
項目發布以後出現了 bug ，修復之後需要更新上線，為了清除瀏覽器緩存帶來的應用，一般文件名會帶上 chunkcontent，微應用發布之後文件名都會發生變化，這時候還需要更新主應用中微應用配置，然後重新編譯主應用然後發布，這套操作簡直是不能忍受的。這也是 微前端框架 之 single-spa 從入門到精通 這篇文章中示例項目中微應用發布時的環境配置選擇 development 的原因。
qiankun 框架為了解決 JS Entry 的問題，於是採用了 HTML Entry 的方式，讓用戶接入微應用就像使用 iframe 一樣簡單。
https://github.com/sy-l123/qiankun-demo
『肆』 qianKun + VUE 實現微前端架構 (基於vue2實現)
創建兩個項目作為實現demo，一個為主應用，一個為子應用
3.配置函數文件 microAppSetting
4.微應用出口文件 index.js
5.在App.vue內配置微應用容器及跳轉菜單
6.在main.js文件內引入微應用出口文件 index.js
7.運行後展示
8.在配置完子應用後的主應用展示
點擊子應用菜單
1.修改子應用路由文件內路由實例屬性： base 為 "/child"
2.在main.js文件內導出生命周期鉤子
3.配置Webpack、跨域與埠號
在vue.config.js內添加：
4.運行後展示
package.json
『伍』 微前端——乾坤qiankun Demo
微前端就是將不同的功能按照不同的維度拆分成多個子應用。通過主應用來載入這些子應用。微前端的核心在於拆，拆完後在合！
我們可以將一個應用劃分成若干個子應用，將子應用打包成一個個的 lib 。當路徑切換 時載入不同的子應用。這樣每個子應用都是獨立的，技術棧也不用做限制了！從而解決了前端協同開發問題。
文檔地址： https://qiankun.umijs.org/zh
2018 年 Single-SPA 誕生了， single-spa 是一個用於前端微服務化的 JavaScript 前端解決方案 ( 本身沒有處理樣式隔離， js 執行隔離 ) 實現了路由劫持和應用載入。
2019 年 qiankun 基於 Single-SPA, 提供了更加開箱即用的 API （ single-spa + sandbox + import-html-entry ） 做到了，技術棧無關、並且接入簡單（像 i frame 一樣簡單）。
這里我們打算建立三個項目進行實操，一個Vue項目充當主應用，另一個Vue和React應用充當子應用
基座：qiankun-base 子應用：qiankun-vue、qiankun-react
react + react-router 技術棧的主應用：只需要讓子應用的 activeRule 包含主應用的這個路由即可。
vue + vue-router 技術棧的主應用:
用絕對路徑，不用用相對路徑，例如
qiankun 只能解決子項目之間的樣式相互污染，不能解決子項目的樣式污染主項目的樣式
沖突的樣式，採用BEM命名方式
子應用，需要增加 update 鉤子以便主應用手動更新微應用
主應用，直接調用子應用實例的 update 方法即可
『陸』 乾坤-微前端架構使用
1.價值
2.官方文檔
https://qiankun.umijs.org/zh/guide
3.配置
主應用(history模式)
子應用
如果是vue-cli >=3,需要在根目錄創建vue.config.js文件
如果是vue-cli >=3,在根目錄vue.config.js文件中的configureWebpack中添加
如果是vue-cli >=3,在根目錄vue.config.js文件中的devServer中添加
『柒』 阿里 qiankun 微前端框架實踐
qiankun ——— 一套完整的微前端解決方案： https://github.com/umijs/qiankun
如圖所示，在qiankun框架中，有主程序與子程序。主程序會留出指定的DOM作為子程序的容器，並且通過主程序里的路由轉發載入子應用。
修改主程序main.js注冊子應用
修改主程App.vue注冊子應用的容器
main.js
Demo： github.com/justworkhar…
與傳統的父子組件通信一樣，父程序通過props向子程序傳遞信息。子程序通過回調函數向父程序傳遞信息。
qiankun框架說白了就是通過在主程中添加一個展示子程序的DOM，經過路由判斷做轉發載入子程序。
『捌』 號稱目前最火的前端框架Vue，它有什麼顯著特點呢
1、Vue是什麼- Vue.js 是目前最火的一個前端框架，除了可以開發網站，還可以開發手機App。
- Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，並成為前端三大主流框架。
- Vue.js 是一套構建用戶界面的框架，只關注視圖層，它不僅易於上手，還便於與第三方庫或既有項目整合。
- Vue.js 是一套用於構建用戶界面的漸進式框架。
- 遵循 MVVM 模式
- 編碼簡潔，體積小，運行效率高，適合移動/PC 端開發
- 它本身只關注 UI, 可以輕松引入 vue 插件或其它第三庫開發項目
總結一句話：不要在想著怎麼操作DOM，而是想著如何操作數據!!
『玖』 Vue與Qiankun微前端組合
參考： https://blog.csdn.net/qq_42268364/article/details/116127872
https://gitee.com/hua0123/qiankun-demo/tree/master
https://blog.csdn.net/weixin_48726650/article/details/106905193
1、修改 App.vue
我們要在app.vue中創建一個容器，負責把獲取到的子應用載入到這里容器裡面
2、新建 arc/qiankun.js文件，引用qiankun並且封裝好
3、修改 main.js
4、修改 src/views/Home.vue
5、修改 src/views/About.vue
6、新建 vue.config.js
1、新增 src/public-path.js
2、修改main.js
在main.js，引入public-path.js 並配合主項目導出single-spa需要的三個生命周期。
注意：路由實例化需要在main.js裡面完成，以便於路由的銷毀，所以路由文件只需要導出路由配置即可（原模板導出的是路由實例）
3、vue.config.js
4、修改 src/router/index.js
5、修改 src/views/Home.vue
6、修改 src/views/About.vue
7、修改 public/index.html
分別啟動 main-app 和 hello-app 項目，然後訪問main-app的
『拾』 微服務乾坤框架
微前端架構具備以下幾個核心價值：
1.技術棧無關
主框架不限制接入應用的技術棧，微應用具備完全自主權
2.獨立開發、獨立部署
微應用倉庫獨立，前後端可獨立開發，部署完成後主框架自動完成同步更新
3.增量升級
在面對各種復雜場景時，我們通常很難對一個已經存在的系統做全量的技術棧升級或重構，而微前端是一種非常好的實施漸進式重構的手段和策略
4.獨立運行時
每個微應用之間狀態隔離，運行時狀態不共享
$ yarn add qiankun # 或者 npm i qiankun -S
import { registerMicroApps, start } from 'qiankun';
registerMicroApps([
{
name: 'react app', // app name registered
entry: '//localhost:7100',
container: '#yourContainer',
activeRule: '/yourActiveRule',
},
{
name: 'vue app',
entry: { scripts: ['//localhost:7100/main.js'] },
container: '#yourContainer2',
activeRule: '/yourActiveRule2',
},
]);
start();