【App has already been mounted.】Vue3接入qiankun出现页面空白的问题

问题

App has already been mounted. If you want to remount the same app, move your app creation logic into a factory function and create fresh app instances for each mount - e.g. const createMyApp = () => createApp(App)

上面是报错信息，Vue3接入qiankun出现页面空白

解决

这个错误提示表明你已经将一个 Vue 应用挂载（mount）到了某个 DOM 元素上，但尝试再次挂载同一个应用实例时出现了问题。Vue 不允许同一个应用实例被多次挂载。

解决方法

为了避免这个问题，你可以将应用创建的逻辑封装到一个工厂函数中，每次挂载时都创建一个新的应用实例。例如：

// 创建一个工厂函数来生成新的应用实例
const createMyApp = () => {
  return createApp(App); // App 是你的根组件
};

// 每次挂载时调用工厂函数创建一个新的应用实例
const app = createMyApp();
app.mount('#app'); // '#app' 是你的挂载目标

为什么需要这样做？

Vue 应用实例是单例的，一旦挂载到 DOM 上，就不能再次挂载。通过工厂函数，你可以确保每次挂载时都使用一个新的应用实例，从而避免冲突。

示例场景

假设你在一个单页应用（SPA）中动态加载不同的模块，每次加载模块时都需要挂载一个新的 Vue 实例，这时工厂函数就非常有用：

function mountApp() {
  const app = createMyApp();
  app.mount('#dynamic-content');
}

// 每次需要挂载时调用 mountApp
mountApp();

这样可以确保每次挂载都是全新的应用实例，避免重复挂载导致的错误。