「微前端實踐」使用Vue+qiankun微前端方案重構老專案的本地驗證

　　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中接入微應用，因此在配置路由時，選擇上面描述的第四種方式，

1. 主應用中設定微應用dom節點

　　在home頁面中接入，home頁面開放主、微應用dom節點，這里的micro-app在后續微應用引入配置中，需要保持一致，

1 <div >
2     <!--主應用渲染，讀取的是當前主應用的路由-->
3     <router-view v-show="$route.name"></router-view>
4     <!--子應用渲染，讀取子應用中的對應的路由-->
5     <div v-show="!$route.name" id="micro-app"></div>
6 </div>

2. 配置路由

　　在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

3. 微應用注冊

　　這里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

4. 匯出啟動函式

 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

5. 選單配置

　　通常選單都會從介面中直接獲取，選單路徑則是在后臺管理系統中直接配置，這里配置的選單，相當于在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中文官網

　　四、效果圖

標籤：其他

上一篇：使用Vue3 + vite + TypeScript專案創建步驟

下一篇：路由守衛