Vue 无法从库中读取未定义的属性“extend”

Question

当我从库文件动态加载组件时，出现错误

Uncaught TypeError: Cannot read property 'extend' of undefined
    at Module.fb15 (index.ts:21)
    at n (bootstrap:19)
    at 0273 (bootstrap:83)
    at cmp.umd.min.js:1
    at universalModuleDefinition:9
    at universalModuleDefinition:1
fb15 @ index.ts:21
n @ bootstrap:19
0273 @ bootstrap:83
(anonymous) @ cmp.umd.min.js:1
(anonymous) @ universalModuleDefinition:9
(anonymous) @ universalModuleDefinition:1

我以这种方式加载组件：

//this is sfc from main app source code 
<template>
  <component :is="gwComponent" />
</template>

<script>
import externalComponent from "@/utils/external-component";
export default {
  name: "extensions-view",
  components: {},
  props: ["_type_", "_instance_"],
  data() {
    return {
      info: {
        description: ""
      },
      instances: []
    };
  },
  computed: {
    gwComponent() {
      if (this._instance_ == "all") {
        return () => import("../components/ExtensionsInstances.vue");
      } else {
        return () =>
          externalComponent(
              window.location.origin +
              "/assets/gw/" +
              this._type_ +
              "/cmp.umd.min.js"
          );
      }
    }
  },

};
</script>

// src/utils/external-component.js from main app source code
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];
}

文件

cmp.umd.min.js

是通过编译另一个 SFC 创建的

npx vue-cli-service build --target lib --formats umd-min --no-clean --dest build/bin --name 'cmp' src/components/ExtEntryPointComponent.vue

。

此编译文件由用户创建并放置在正确的位置。最后，用户可以向主应用程序添加一些扩展，而无需主应用程序源代码。

@编辑

在开发模式下，我有更多信息，但这仍然没有告诉我任何信息：/

我的代码基于这篇文章： https://markus.oberlehner.net/blog/distributed-vue-applications-loading-components-via-http/

Answer 1

尝试将其导出为返回的函数

Vue.extend()

export default () => Vue.extend({
   ...
})

然后当你导入它时，调用该函数。

Answer 2

删除主index.html上的vuetify脚本标签，错误就会消失