10月份換了新的工作，參與完一個月的需求迭代後，接到了專案重構的任務。簡單來說，需要在短時間內提出方案設想，同時進行本地驗證，最終需要拿出一套技術替換方案來。於是，埋頭苦幹了一個月，總算幹了點成績出來，今天把當時的思考和實踐做個簡單總結，就當是個覆盤吧。
一、老專案現狀
最初接觸到的老專案，使用到的前端技術棧主要是（jQuery1.8 + layui-v2.5.4 + ExtJS4.2.1.883），當時拿到這個專案的時候，上手書寫起來竟然有點手生，畢竟這幾年長時間使用的都是vue和react，jquery的書寫方式有點陌生了，同時發現使用的ExtJS4.2.1.883（2011年釋出）版本陳舊、 layui-v2.5.4於2021年7月也已停止更新。這兩種框架，一種學習曲線高，一種停止更新後可能後續碰到複雜問題沒有地方可查，所以還是想著整體上去替換。
二、提出設想
由於當前專案，子模組眾多，且每個模組涉及功能也很多，老專案中將所有模組都獨立成單獨資料夾，在選單點選時，獲取模組url，然後基於iframe方式接入。這種方式存在的問題是：
- 每個模組都單獨使用檔案，公共檔案不能共享，模組越多，檔案越多。
- iframe方式引入，每次載入都需要重建瀏覽器上下文、資源重新載入，導致緩慢。
- iframe方式引入的模組，與父視窗資料完全隔離，但該專案又並非是微前端專案，隔離後的資料傳遞步驟繁瑣。
考慮到老專案中引入iframe思想，已經有了微前端的影子，於是，我在設想中引入了qiankun微前端方案。
2.1 微前端技術簡介
那到底什麼是微前端呢？首先微的概念，就是小的意思，小是相對於大來說的。也就是說，在專案模組增加，功能增多，業務日趨複雜的情況下，一個普通應用會逐漸成為巨石應用，巨石應用在維護成本與難度上也逐漸會出現問題。如果把龐大的應用，拆分成小型應用，然後根據小型應用去開發，在人員管理、技術把控上也會更加容易。微前端的優點大家可在qiankun官網上自行檢視，這裡不再贅述。
除了考慮引入微前端技術之外，我在設計時還建立了一個公共庫，因為最終的微應用都會合在主應用中，作為一個整體呈現到使用者眼前，這裡必須要保證公用的樣式，除此之外，在每個應用中會存在一些工具方法，如對資料格式的處理、時間處理等，因此還構建了一個公共庫。
2.2 微應用拆分
已經確認使用微前端的思想，那麼最重要的一個任務就是對微應用進行拆分。拆分原則上，可以根據共性業務功能去抽取，也可以根據目前已有的選單管理去抽取，由於是在實驗階段，重在驗證微前端實現上，因此我直接按照已有的選單去抽取了對應微應用。
2.3 技術架構
在系統架構方面，主應用能動態註冊微應用，同時通過路由管理接入微應用。
微應用，需要滿足單獨開發、單獨部署、單獨測試、同時又能接入到主應用中與主應用同時執行的原則。單獨開發時候，需要具有登入、工作臺、系統管理等的功能，接入主應用，能夠直接接入到內容展示區域。
主應用、微應用根據需求安裝公共元件庫，同時能夠獨立部署。架構圖涉密，這裡就不放出來了。
三、具體實現
主應用與微應用使用到的技術棧（qiankun-2.6.3 + vueCli4.5.0 + vue-2.6.11 + element-ui-2.15.6 ），微應用也可以使用其他技術進行開發，這裡技術棧不做限制。後續可以試著接入其他技術棧。
3.1 主應用
主應用利用vue-cli建立專案，vue-cli如何快速建立vue專案，請在Vue CLI官網查閱，預設加入vue-router、vuex生態。注，所有在3.1章節中展示的程式碼均在主應用專案中，當前主應用專案為micro-front-main。
3.1.1 qiankun引入
在主應用中，執行yarn add qiankun，安裝qiankun框架。
3.1.2 路由配置
在主應用的src目錄下，建立micro資料夾，同時建立app和index.js檔案，app.js檔案中，配置接入的子應用，index中啟動微服務。
在微應用的路由配置上，需要遵循路由配置原則。路由配置需要根據主子路由的模式（history和hash）、主路由是否在某個路由頁面載入微應用兩個方面進行設計。
- 第一種情況，主應用路由是history模式，子應用也是history模式，不在主應用的某個路由頁面載入微應用，即直接在App.vue中載入微應用。
- 第二種情況，主應用路由是(history/hash)模式，微應用是hash模式，不在主應用的某個路由頁面載入微應用。這種與主子路由都是hash模式的方式配置相同，需要注意‘#’。
-
第三種情況，主應用路由是history模式，子應用路由是history模式，在主應用的某個路由頁面載入微應用，如Home.vue頁面載入。
-
第四種情況，主應用路由是(history/hash)模式，子應用路由是hash模式，在主應用的某個路由頁面載入微應用，如Home.vue頁面載入。
3.1.3 路由具體實現
本文實踐的主應用與微應用都是基於hash模式的，同時定義在主頁面home.vue中接入微應用，因此在配置路由時，選擇上面描述的第四種方式。
- 主應用中設定微應用dom節點
在home頁面中接入，home頁面開放主、微應用dom節點。這裡的micro-app在後續微應用引入配置中，需要保持一致。
1 <div class="content-wrapper"> 2 <!--主應用渲染，讀取的是當前主應用的路由--> 3 <router-view v-show="$route.name"></router-view> 4 <!--子應用渲染，讀取子應用中的對應的路由--> 5 <div v-show="!$route.name" id="micro-app"></div> 6 </div>
- 配置路由
在src下新建routers.js檔案，在該檔案中，配置主、微應用的路由。這裡使用name區分主、微應用。與上面home.vue頁面中規定的v-show相呼應。
1 import Home from './pages/Home'
2 import Dashboard from './pages/Dashboard'
3 import Login from './pages/Login'
4 const routers = [
5 {
6 path: '/home',
7 name: 'Home',
8 component: Home,
9 children: [
10 {
11 path: '',
12 name: 'Dashboard',
13 component: Dashboard
14 }
15 ]
16 },
17 /**
18 * 微服務應用url相關配置
19 */
20 {
21 path: '/home/*',
22 component: Home
23 }
24 ]
25 export default routers
- 微應用註冊
這裡container屬性與頁面中定義的掛載dom id屬性一致。
1 const getActiveRule = (hash) => (location) => location.hash.startsWith(hash);
2
3 const MICRO_FRONTED_DATA_MANAGE = process.env.VUE_APP_MICRO_DATA_MANAGE
4 const MICRO_FRONTED_DATA_QUERY = process.env.VUE_APP_MICRO_DATA_QUERY
5 // micro/app.js
6 const apps = [
7 {
8 name: 'data-manage-micro',
9 entry: MICRO_FRONTED_DATA_MANAGE,
10 container: '#micro-app',
11 activeRule: getActiveRule('#/home/micro-data-manage'),
12 // 這裡也可以直接寫 activeRule: '#/data'，但是如果主應用是 history 模式或者主應用部署在非根目錄，這樣寫不會生效。
13 },
14 {
15 name: 'micro-fronted-query',
16 entry: MICRO_FRONTED_DATA_QUERY,
17 container: '#micro-app',
18 activeRule: getActiveRule('#/home/micro-fronted-query'),
19 }
20 ]
21
22 export default apps
- 匯出啟動函式
1 // 與路由直接關聯
2 import {
3 registerMicroApps,
4 start,
5 addGlobalUncaughtErrorHandler
6 } from 'qiankun'
7 import apps from './app'
8 console.log(apps)
9
10 /**
11 * name: 微應用名稱
12 * entry: 微應用入口，一般是微應用啟動後的地址
13 * container: 微應用掛載節點，類似iframe的id
14 * activeRule: 微應用觸發的路由規則 - 觸發路由規則後將載入該微應用
15 *
16 */
17 registerMicroApps(apps)
18
19 addGlobalUncaughtErrorHandler((event) => {
20 console.error(event);
21 const { message: msg } = event
22 if (msg && msg.includes("died in status LOADING_SOURCE_CODE")) {
23 console.error("微應用載入失敗，請檢查應用是否可執行");
24 }
25 });
26
27 // 啟動主應用
28 export default start
- 選單配置
通常選單都會從介面中直接獲取，選單路徑則是在後臺管理系統中直接配置，這裡配置的選單，相當於在home.vue頁面選單欄中點選後操作的事件，因此選單配置的路徑也要和上面定義的微應用路由一致。如選單1對應路徑path為"/home/micro-fronted-query"，這裡的路徑與微應用註冊時定義的路徑一致
3.1.4 頁面中啟動qiankun
在主應用中，如果不在根APP.vue中接入微應用，需要去對應接入微應用的頁面中呼叫啟動函式。如在App.vue頁面中，則start()方法在main.js中進行呼叫。如在home.vue中接入，則start()方法在Home.vue頁面中呼叫。
1 import qiankunStart from '../micro'
2 mounted() {
3 this.getMenu()
4 if( this.$router.currentRoute.path !== '/home' ) {
5 this.$router.push({path: '/home'})
6 }
7 if (!window.qiankunStarted) {
8 window.qiankunStarted = true;
9 qiankunStart();
10 }
11 },
主應用接入的主要功能已完成，下面開始微應用接入工作。
3.2 微應用
微應用同樣利用vue-cli框架進行建立，主要做一下幾個工作。微應用專案為micro-fronted-query。
3.2.1 登入邏輯
由於微應用需要確保獨立執行、測試、部署的能力，因此在具體開發中需要根據專案需要，梳理登入邏輯。在本次測試中，首先利用全域性導航守衛判斷token是否存在，如果存在的話直接能夠讀取路由，如果不存在，則進入微應用的登入頁面。同時為了防止cookies過期，會在介面請求的攔截器中，判斷token是否有效，如果token失效了，也會直接進入微應用的登入頁面。
3.2.2 建立微服務配置檔案
在子應用的src目錄下，建立微服務的配置檔案public-path.js
1 if (window.__POWERED_BY_QIANKUN__) {
2 // 動態設定 webpack publicPath，防止資源載入出錯
3 // eslint-disable-next-line no-undef
4 __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
5 }
3.2.3 是否微服務處理
在main.js中根據是否啟用微服務，處理渲染邏輯，為了避免根 id #app與其他的 DOM 衝突，需要限制查詢範圍，同時還需要暴露bootstrap/mount/unmount三個生命週期函式，否則會出現報錯或載入不上的問題。
1 src/main.js
2 // 微應用的渲染函式
3 function render(props = {}) {
4 const { container } = props;
5 router = new VueRouter({
6 // 設定微服務與獨立執行時的路徑
7 routes : sysRouters.concat(routerConfigs)
8 })
9 vueInstance = new Vue({
10 render: h => h(App),
11 router
12 }).$mount(container ? container.querySelector('#app') : '#app')
13 }
14 // 獨立執行時，直接讀取當前配置
15 if (!isQiankun) {
16 render()
17 }
18 /**
19 * bootstrap 只會在微應用初始化的時候呼叫一次，下次微應用重新進入時會直接呼叫 mount 鉤子，不會再重複觸發 bootstrap。
20 * 通常我們可以在這裡做一些全域性變數的初始化，比如不會在 unmount 階段被銷燬的應用級別的快取等。
21 */
22 export async function bootstrap() {
23 console.log("VueMicroApp bootstraped");
24 }
25 /**
26 * 應用每次進入都會呼叫 mount 方法，通常我們在這裡觸發應用的渲染方法
27 */
28 export async function mount(props) {
29 console.log("VueMicroApp mount", props);
30 render(props);
31 }
32 /**
33 * 應用每次 切出/解除安裝 會呼叫的方法，通常在這裡我們會解除安裝微應用的應用例項
34 */
35 export async function unmount() {
36 console.log("VueMicroApp unmount");
37 vueInstance.$destroy();
38 vueInstance = null;
39 router = null;
40 }
3.2.4 打包配置檔案修改
1 const packageName = require('./package.json').name;
2
3 module.exports = {
4 // 基本路徑
5 publicPath: "/query/",
6 // 輸出檔案目錄
7 outputDir: process.env.outputDir,
8 devServer: {
9 // 監聽埠
10 port: 8083,
11 // 關閉主機檢查，使微應用可以被 fetch
12 disableHostCheck: true,
13 // 配置跨域請求頭，解決開發環境的跨域問題
14 headers: {
15 "Access-Control-Allow-Origin": "*",
16 },
17 },
18 configureWebpack: {
19 output: {
20 library: `${packageName}`,
21 libraryTarget: 'umd', // 把微應用打包成 umd 庫格式
22 jsonpFunction: `webpackJsonp_${packageName}`,
23 },
24 },
25 };
3.2.5 路由配置
在微應用的路由配置檔案中，需要增加主應用中配置時對應的路由根路徑，同時區分是否為微服務，微服務情況下新增路由字首，非微服務不需要新增。
1 src/router.js
2 const prefix = window.__POWERED_BY_QIANKUN__ ? '/home/micro-fronted-query' : ''
3 const appRouters = [
4 {
5 path: `${prefix}/`,
6 redirect: `${prefix}/login`
7 },
8 {
9 path: `${prefix}/login`,
10 name: 'login',
11 meta: {
12 title: 'Login - 登入'
13 },
14 component: () => import('./views/login.vue')
15 },
16 {
17 path: `${prefix}/home`,
18 component: () => import('./views/home.vue')
19 },
20 {
21 path: `${prefix}/list`,
22 component: () => import('./views/list.vue')
23 }
24 ]
25
26 export default appRouters
3.3 公共庫
除了主、微應用自身邏輯的處理之外，在這個方案當中，又建立了一個公共庫，公共庫主要能夠保證主微應用樣式相容，同時能夠對公用元件、方法等進行復用。該公共庫同樣基於vue進行開發，當然這裡可以選擇任意技術開發公共庫。公共庫應用名稱為system-common。公共庫，主要用於抽取各個應用之間公用的內容，包括系統公共路由配置、業務相關頁面如登入、許可權、使用者協議元件，判斷登入方式的api介面，cookie設定與獲取的工具方法等。技術上，我們採用VUE框架，開發公共庫，同時提供外掛暴露的方式，供其他應用使用，vue如何開發外掛會在後續文章中更新。公共庫可以使用npm發私有包的形式使用，也可以使用yarn add file:/ 的模式，直接安裝在本地專案中。
3.3.1 公共庫外掛開發
在src/index.js中，主要暴露外掛方法，如，我們在components資料夾下建立了一個共用元件，通過在components/index.js中，使用Vue.component()方法，註冊元件。同時將該註冊過的元件，在index.js中進行安裝。這樣我們在其他應用中，只要安裝了公共庫，就可以使用Vue.use()方法進行使用元件了。
1 // src/index.js檔案
2 const install = function(Vue) {
3 if (install.installed) return;
4 install.installed = true;
5 // 遍歷註冊所有元件
6 components.map((component) => Vue.use(component));
7 }
8
9 if (typeof window !== "undefined" && window.Vue) {
10 install(window.Vue);
11 }
12
13 export default {
14 install,
15 ...components, // 共用元件
16 cookies, // 公共cookies
17 sysRouters, // 通用路由
18 judgeApi // 通用api方法
19 };
3.4 專案部署
3.4.1 應用打包
微應用是基於vue進行開發，嚴格按照vue提供的方式進行打包。
首先在應用中建立.env.*檔案，如.env.development.js檔案代表的是開發環境下的打包配置，在該配置中，可以配置介面的訪問地址，打包路徑、node執行環境等。同時修改package.json中script執行指令碼的命令，在命令中增加--mode模式。這樣就可以根據不同配置進行不同環境的打包。除了通用打包方式外，還增加了動態微應用配置。這裡在.env檔案中，增加主應用接入的微應用地址配配置，然後在註冊微應用的方法中動態獲取，這樣在註冊微應用時，可以只修改配置檔案中的內容就可以完成註冊。
1 // .env.development 2 NODE_ENV = 'development' 3 VUE_APP_MODE = 'development' 4 outputDir = 'dev' 5 VUE_APP_MICRO_DATA_MANAGE = '//localhost:9999/data/' 6 VUE_APP_MICRO_DATA_QUERY = '//localhost:8083/query/'
3.4.2 nginx部署
專案部署，在本地測試時，主要採用了nginx進行靜態資源重定向。將各個應用，打包之後，配置在nginx相同域名下，就可以實現cookie的資料共享。具體nginx部署，可查詢nginx中文官網
四、效果圖
