Vue - 从另一个站点加载外部组件

Question

我正在尝试从外部站点检索 vue 组件并将其加载到我的应用程序中，但我终其一生都无法弄清楚。

这是完整的场景；

• 站点 A（内部托管站点）加载 VueJS 应用程序
• 站点 A 从站点 B 请求一个 VueJS 组件（内部托管站点，不同的子域）
  • 理想情况下，站点 B 将包含 .vue 文件，它们可以是原生 .vue 格式，也可以是预编译的（可能是 vue-cli？）
• 站点 A 加载并呈现应用程序中的组件

假设我想从站点 B 加载一个非常简单的组件；

{
    "template": "<div><span>{{message}}</span></div>",
    "data": function() {
        return { "message": "Hello World" };
    }
}

我尝试了以下这些，结果好坏参半；

在我的 index.ts 中（使用 TypeScript）

Vue.component('my-external-component', () => (Vue as any).http.get("http://test.local/test.js"));

在我的 .vue 文件中

<my-external-component></my-external-component>

这会导致这条评论被添加到 DOM 中

<!--function (a, b, c, d) { return createElement(vm, a, b, c, d, true); }-->

不过添加

<component :is="my-external-component"></component>

导致向 DOM 添加空注释

<!---->

我还对此做了一些变体，包括使用 cli 将模板编译成 js 文件并尝试加载该文件，出现关于无法访问 template.trim 或类似内容的奇怪错误。

Answer 1

鉴于您的组件定义是（或曾经是）JSON 并且组件 data 应该是一个函数，您应该在解析异步组件之前转换结果。

例如（使用fetch，因为我不知道Vue.http是什么）

Vue.component('MyExternalComponent', () =>
  fetch('http://test.local/test.json').then(res => res.json()).then(defn => ({
    ...defn,
    data () { // transform defn.data into a function
      return defn.data
    }
  }))
)

JSFiddle demo here 使用他们的/echo/json service 来模拟外部组件定义。

---

从远程 .js 文件中导出组件定义会很棘手。