Vue 3 外部组件/插件在运行时加载

我正在设计一个架构Vue 3具有基于分布式模块所有权的应用程序。模块系统将用插件来表示（似乎是最合适的解决方案，允许vuex模块和vue-router动态注入）。每个此类模块/插件都将由在独立存储库中工作的专门团队开发。我们不能使用npm每个插件包的方法作为部署过程也应该被隔离，并且npm方法核心应用程序团队每次都必须重建应用程序npm包插件有更新。这意味着我们必须在运行时通过以下方式加载此类插件/页面http.

So far 这种方法作者：Markus Oberlehner 似乎是某种可行的方法 - 它使用自定义Promise基于解决方案webpack缺少“在运行时加载外部 url 脚本”功能。虽然它可以很好地工作Vue 2, Vue 3 gives VNode type: undefined error.

上述文章提供了以下内容webpack外部元件加载解决方案：

// src/utils/external-component.js
export default async function externalComponent(url) {
    const name = url.split('/').reverse()[0].match(/^(.*?)\.umd/)[1];

    if (window[name]) return window[name];

    window[name] = new Promise((resolve, reject) => {
        const script = document.createElement('script');
        script.async = true;
        script.addEventListener('load', () => {
            resolve(window[name]);
        });
        script.addEventListener('error', () => {
            reject(new Error(`Error loading ${url}`));
        });
        script.src = url;
        document.head.appendChild(script);
    });

    return window[name];
}

但正如我所说，上面不适用于Vue 3 defineAsyncComponent机制。

// 2.x version WORKS
const oldAsyncComponent = () => externalComponent('http://some-external-script-url.js')

// 3.x version DOES NOT WORK
const asyncComponent = defineAsyncComponent(
    () => externalComponent('http://some-external-script-url.js')
)

所以我有两个问题：

1. 对于上述架构规范是否有任何已知的更好的解决方案/建议？

2. 有工作的吗webpack动态外部导入解决方案经过测试Vue 3在那里？

UPD：这里很小复制仓库

我们通过聊天一起解决了这个问题。

通过 Vue 3 vue-cli 构建的组件依赖Vue在全球范围内可用。因此，为了渲染通过我的文章中描述的技术加载的组件，您需要设置window.Vue参考Vue本身。然后一切都会按预期进行。