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

问题描述

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

到目前为止，Markus Oberlehner的this approach似乎有些走样-它使用基于Promise的自定义解决方案来解决webpack缺少的“在运行时加载外部url脚本”功能。尽管Vue 2可以正常使用，但是Vue 3会出现VNode type: undefined错误。

上述文章提供了以下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：这是个小reproduction repo

解决方法

我们通过聊天共同解决了这个问题。

通过Vue 3 vue-cli构建的组件依赖于window.Vue在全球范围内可用。因此，为了呈现通过本文中介绍的技术加载的组件，您需要将Vue设置为对b.GroupId本身的引用。然后一切都会按预期进行。