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

我正在尝试从外部站点检索vue组件并将其加载到我的应用程序中，但我始终无法解决这个问题

这里是完整的场景

• 站点A（内部托管站点）加载VueJS应用程序
• 站点A从站点B请求VueJS组件（内部托管站点，不同子域）
  • 理想情况下，站点B将由.vue文件组成，这些文件可以是本机的.vue格式，也可以是预编译的（可能是vue cli）
• 站点A加载并呈现应用程序中的组件

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

{
“模板”：“{message}}”，
“数据”：函数（）{
返回{“消息”：“你好世界”}；
}
}

我尝试了以下方法，但结果参差不齐

在my index.ts内（使用TypeScript）

Vue.component（'my-external-component'，（）=>（Vue如有）。http.get（'http://test.local/test.js"));

在我的.vue文件中

这将导致将此注释添加到DOM中

然而，增加

结果将向DOM中添加空注释

---

我还做了一些修改，包括使用cli将模板编译成js文件并尝试加载该文件，以及无法访问

template.trim

或类似内容的奇怪错误。

考虑到您的组件定义是（或曾经是）JSON和component

data

应该是一个函数，您应该在解析异步组件之前转换结果

例如（使用

fetch

，因为我不知道

Vue.http

是什么）

Vue.component（'MyExternalComponent'，（）=>
取（'http://test.local/test.json）。然后（res=>res.json（））。然后（defn=>({
…defn，
data（）{//将defn.data转换为函数
返回定义数据
}
}))
)

使用它们来模拟外部零部件定义

---

---

从远程

.js

文件导出组件定义会很棘手。

您的“非常简单的组件”应该具有

数据

功能，而不是普通的object@Phil感谢您指出这一点，我已经更新了我的本地测试以及问题，它仍然只是添加了函数注释。我还更新了问题，以反映组件的这一变化。仅供参考，您的

test.json

不再是json。您是否认为MIME类型为json可能会给我带来一些麻烦？我将尝试将其更改为JS，因为这就是它现在的实际情况。非常感谢您的帮助，这太棒了。但是，您是否可以稍微扩展一下

jsonpCallbackFunctionName

的主体是什么样子？@AdamH不确定您的意思，但是

Vue.http

是什么？是Axios吗？如果是这样的话，我认为它不支持JSONP开箱即用，我可以改为fetch，现在我们正处于POC阶段。Vue.http来自

Vue资源

，您以前可能见过它像

这样使用。$http

。@AdamH非常肯定。老实说，我不推荐JSONP选项，因为它要么在远程资源上引入服务器端需求，要么在Vue应用程序中引入全局范围的函数。我会坚持改造JSONOk，非常感谢您的帮助。如果可以的话，我会投两次票，但你必须接受我永恒的感激。