微前端中如何正确共享 Vue 依赖避免重复加载？

Good“西西提问于 2026-02-28 08:17:21 阅读 15

前端

我在用 qiankun 搭建微前端项目，主应用和子应用都用了 Vue 3，但发现子应用加载时又把 Vue 打包进去了，导致页面卡顿。我试过在 webpack 的 externals 里排除 Vue，但子应用直接报错说找不到 Vue。

这是子应用的入口代码：

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

// 子应用挂载
export async function mount(props) {
  const app = createApp(App);
  app.mount('#subapp');
}
</script>

该怎么配置才能让子应用复用主应用的 Vue 实例，而不是自己再加载一遍？

共享依赖

我来解答赞 6 收藏

反馈

1 条解答

夏侯爱菊 Lv1

这个问题我之前踩过坑，qiankun 共享依赖的核心思路是主应用把 Vue 挂载到 window，子应用通过 externals 排除打包，运行时直接用主应用的。

通用的做法分三步走：

第一步，主应用把 Vue 挂载到 window 上。在你的主应用入口文件里加这行：

import { createApp } from 'vue'

import * as Vue from 'vue'



// 关键：挂载到 window 供子应用使用

window.Vue = Vue



// 正常初始化主应用

const app = createApp(App)

app.mount('#main-app')

第二步，子应用 webpack 配置 externals。在 vue.config.js 里配置：

module.exports = {

  configureWebpack: {

    externals: {

      vue: 'Vue'

    }

  }

}

第三步，子应用代码不用改，保持 import { createApp } from 'vue' 就行。webpack 打包时会把它替换成从全局变量 window.Vue 获取。

你之前报错找不到 Vue，大概率是主应用没把 Vue 挂到 window 上，或者挂的时机有问题。qiankun 加载子应用时主应用已经跑起来了，所以 window.Vue 应该是存在的。

还有个坑要注意，如果你用了 vue-router、pinia 这些库，它们也得按同样方式处理，不然子应用打包时会把它们打进去，版本不一致容易出幺蛾子。不过一般来说只共享核心的 vue 就够了，其他的让子应用自己带也行，体积不会太大。

2026-02-28 14:30