single-spa 中 Vue 子应用无法正确挂载根组件怎么办？

Mr-海燕提问于 2026-03-04 19:47:20 阅读 6

框架

我在用 single-spa 接入一个 Vue3 子应用，主应用能加载子应用的 JS，但页面空白，控制台也没报错。我怀疑是挂载逻辑有问题，因为单独运行子应用是正常的。

我尝试把 createApp 的逻辑放到 single-spa 的 mount 生命周期里，但好像没生效。下面是我的入口文件写法：

<script>
import { createApp } from 'vue';
import App from './App.vue';

export const mount = (props) => {
  const app = createApp(App);
  app.mount('#app');
};

export const unmount = () => {
  // 暂时没处理卸载
};
</script>

是不是应该用不同的挂载点？或者需要配合 single-spa-vue 插件？现在完全卡在这了。

我来解答赞 2 收藏

反馈

1 条解答

程序猿雨路 Lv1

你这个问题是因为挂载点和single-spa的工作方式没匹配好。直接mount('#app')会出问题，因为single-spa需要接管DOM控制权。来改一下写法：

首先安装single-spa-vue插件：

npm install single-spa-vue

然后重构入口文件：

import { createApp } from 'vue'

import App from './App.vue'

import singleSpaVue from 'single-spa-vue'



const vueLifecycles = singleSpaVue({

  createApp,

  appOptions: {

    render() {

      return h(App)

    }

  }

})



export const bootstrap = vueLifecycles.bootstrap

export const mount = vueLifecycles.mount

export const unmount = vueLifecycles.unmount

关键点：
1. 必须用single-spa-vue提供的挂载方式，它会处理好容器问题
2. 不需要手动调用app.mount()
3. 主应用中要确保为子应用预留了正确的挂载区域

单独运行子应用正常是因为直接用了#app作为挂载点，但在single-spa环境下这个节点可能不存在或者被主应用控制了。用插件的方式更可靠，还能自动处理卸载逻辑。

如果还不行，检查下主应用是否配置了正确的domElementGetter，不过通常插件默认行为就能解决大部分情况。

2026-03-05 06:00