挂载 Vue3 到 window

Question

出于某些原因，我需要在一个页面上加载多个 Vue App，它们来自不同的文件，并且分别 bundle

这样每个 App 都需要引入 Vue 3，造成文件体积的浪费，所以我想让这些 App 共用一个 Vue 实例。

在我的预期中，其中一个 App 负责引入 Vue，并将它挂载到 window：

import * as Vue from 'vue'
window.Vue = Vue

在其他 App 中：

import App from './App.vue'

Vue.createApp(App).mount('#xx')

然后发生了一些奇怪的事情：

• v-for 完全不能渲染
• Text node 和元素不能共存（模板 {{ data }} <p>xxx</p> 中，data 不渲染）

请问如何正确地挂载 Vue 到 window？（我了解到 Vue 有浏览器版本的 dist，会自动挂载到 window，但是这样会增加一个请求）

Answer 1

外层html中 script 引入vue，每个子vue项目配置webpack分离vue