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 演示使用他们的/echo/json服务来模拟外部组件定义。

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