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 using their /echo/json service模拟外部组件定义

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

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

Vue - Load External Components From Another Site

vue.js

vue-component

vue-cli