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号