qiankun vue3項目額外注意
如果接入的項目是使用vue3構建的,需要額外進行以下兩項更改:
首先,在實例instance賦值時,務必確保是 createApp 函數的返回值賦值給instance,若后續有鏈式調用,先完成instance賦值操作后再進行鏈式調用。
正確的方法:
instance = createApp(currentApp);
instance.use(store)
......
.mount(container ? container.querySelector('#app') : '#app');
錯誤的方法(mount返回值賦值給instance,這樣在卸載時會無法調用unmount方法導致報錯):
instance = createApp(currentApp).use(store)
......
.mount(container ? container.querySelector('#app') : '#app');
其次,unmount方法需要更改為:
/**
* 應用每次 切出/卸載 會調用的方法,通常在這里我們會卸載微應用的應用實例
*/
export async function unmount() {
console.log('***MicroApp unmount');
instance?.unmount();
instance._container.innerHTML = '';
instance = null;
router = null;
}

浙公網安備 33010602011771號