【微前端】Qiankun Vue3 配置

語言: CN / TW / HK

highlight: vs2015

小知識,大挑戰!本文正在參與“程式設計師必備小知識”創作活動。

導讀

目前 Qiankun 官網給出了 React 16Vue 2Angular 9 的配置說明,但是筆者的需求是 Vue 3 + TS,所以自己研究實驗了一下,現在分享出來,也算是做個記錄。不保證是最優,但是能執行。

正文

主應用

按照官網的例子寫就行,但是建議在主應用的 html 檔案中,為每一個 Micro App 建一個 root DOM 元素,然後把 container: '#container' 的值替換成相應的元素。舉例如下: html <div id="app"></div> <div id="reactApp"></div> <div id="vueApp"></div>

微應用

第 1、3 步跟官網的一樣。不同的主要是第 2 步。因為是 TS 應用,所以加個第 0 步,做一些準備工作。

Step 0

  1. src/shims-vue.d.ts 加入如下程式碼,消除 TS 的報錯: ts interface Window { __POWERED_BY_QIANKUN__: boolean; }
  2. 根目錄增加 .eslintignore 檔案,消除 vue.config.js 的報錯,內容如下: shell /vue.config.js
  3. yarn add -D qiankun,主要用它的 TS 宣告;

Step 2

Step 1、3 參考官網即可,這裡不做展開。 1. 修改 src/router/index.ts 如下部分 ts const router = createRouter({ history: createWebHistory( (window.__POWERED_BY_QIANKUN__ ? "/app-vue" : "") + process.env.BASE_URL ), routes, }); 2. 修改 main.ts 檔案,內容如下

PS:還有個簡單粗暴的辦法,就是把 main.ts 改成 main.js,這樣就不需要處理 TS 了,也就不需要因此裝 qiankun 了。不過記得在 vue.config.jsconfigureWebpack.entry 修改為 main.js,否則就執行不起來了。 ```ts import "./public-path.js"; import { createApp, App as IApp, ComponentPublicInstance } from "vue"; import App from "./App.vue"; import "./registerServiceWorker"; import router from "./router"; import store from "./store"; import { LifeCycleFn } from "qiankun";

type LifeCycle = LifeCycleFn>;

let app: IApp; let instance: ComponentPublicInstance;

// LoadableApp 宣告不完善,只能先用 any function render(props: any) { const { container } = props; app = createApp(App); instance = app .use(store) .use(router) .mount(container ? container.querySelector("#app") : "#app"); }

// 獨立執行時 if (!window.POWERED_BY_QIANKUN) { render({}); }

export const bootstrap: LifeCycle = async () => { console.log("[vue] vue app bootstraped"); };

export const mount: LifeCycle = async (props) => { console.log("[vue] props from main framework", props); render(props); };

export const unmount: LifeCycle = async () => { app.unmount(); // 不確定是否需要以下程式碼 instance.$el.innerHTML = ""; }; ```

結語

筆者的終極目的是探索一個可以平滑重構專案的方案,所以實際上更需要的是 Qiankun 提供的“多例項”模式,即一個頁面中同時存在多個微應用。所以這只是個開始,其他內容敬請期待。

最後,用 Qiankun 的作者 kuitos 在《微前端的核心價值》一文中的一段內容結尾:

為什麼舉這兩個場景呢,因為我們去統計一下業界關於”微前端“發過聲的公司,會發現 adopt 微前端的公司,基本上都是做 ToB 軟體服務的,沒有哪家 ToC 公司會有微前端的訴求(有也是內部的中後臺系統),為什麼會這樣?很簡單,因為很少有 ToC 軟體活得過 3 年以上的。而對於 ToB 應用而言,3~5 年太常見了好嗎!去看看阿里雲最早的那些產品的控制檯,去看看那些電信軟體、銀行軟體,哪個不是 10 年+ 的壽命?企業軟體的升級有多痛這個我就不多說了。所以大部分企業應用都會有一個核心的訴求,就是如何確保我的遺產程式碼能平滑的遷移,以及如何確保我在若干年後還能用上時下熱門的技術棧?