小编Ada*_*m H的帖子

我正在尝试从外部站点检索 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

<!----> …