代码之家 › 专栏 › 技术社区 › Adam H

Vue-从其他站点加载外部组件

vue-cli vue-component vue.js

1

Adam H · 技术社区 · 7 年前

我正在尝试从外部站点中检索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 或者沿着这些线。

1 回复 | 直到 7 年前

1

2

Phil 7 年前

假设您的组件定义是(或曾经是)JSON和组件 data 应该是一个函数,在解析异步组件之前应该转换结果。

例如(使用 fetch 因为我不知道 Vue.http IS)

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 文件会很棘手。