# Vue3+vite+ts 基於Qiankun的微服務框架設計
###### tags: `Vue-cli`、`Vue3`
### 關於Qiankun
qiankun 是一個基於 single-spa 而衍生出來的套件，由螞蟻金流開發，主要透過 html-rntry 技術崁入到主應用，並透過自身沙箱設計切開各微服務。

### 崁入方法
專案會區分為主應用與子應用，主應用為主要呈現的畫面；子應用及微服務，為各自功能獨立的專案。畫面對應方式主要以路由對應為主，故在崁入微服務時必須給予獨立路由

* #### 主應用
安裝 qiankun 套件，並針對要崁入的畫面給予頁面 or 彈窗，並給他獨立路由。
使用 :page* 為了可以吃到微服務下所有路由對應

微服務崁入設定：
onGlobalStateChange 為微服務傳向主應用的 function 呼叫，下方 loadMicroApp 為 qiankun 的動態載入方式
name：該微服務名稱(建議設定可識別的名稱)
entry：該微服務程式進入點
container：渲染在畫面的 id or class 對應
props：由主應用要給微服務的參數傳遞

* #### 子應用
vite 使用可下載 vite-plugin-qiankun 套件，安裝完之後該套件會在全域創建一個 qiankunWindow 可供使用，在 main.ts 即可依據 qiankunWindow.__ POWERED_BY_QIANKUN __ 來判斷是否使用微服務掛載，透過此方式可以切割出直連方式，利於本地直接開啟開發，以及線上掛載版本。

設定完成之後則需設定對應路由

以上設定完之後即可由主應用崁入子應用

附註：
qiankun 崁入不像 iframe 是強分割，CSS 是會互相影響的，所以要特別注意命名。
api呼叫時，要注意 domain 不同會產生跨域的問題