Vue — загрузка внешних компонентов с другого сайта

Я пытаюсь получить компонент vue с внешнего сайта и загрузить его в свое приложение, и я не могу понять это.

Вот полный сценарий;

  • Сайт A (внутренний размещенный сайт) загружает приложение VueJS
  • Site A requests a VueJS component from Site B (Internally Hosted Site, different sub domain)
    • Ideally, Site B would consist of .vue files either in their native .vue format or precompiled (maybe vue-cli for this?)
  • Сайт 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 или что-то в этом роде.


vue.js vue-cli vue-component
person Adam H    schedule 07.02.2019    source источник
comment
Ваш очень простой компонент должен иметь data функцию, а не простой объект   -  person Phil    schedule 08.02.2019
comment
@Phil, спасибо, что указали на это, я обновил свой локальный тест, а также вопрос, и он все еще просто добавляет комментарий к функции. Я также обновил вопрос, чтобы отразить это изменение в компоненте.   -  person Adam H    schedule 08.02.2019
comment
К вашему сведению, ваш test.json больше не JSON   -  person Phil    schedule 08.02.2019
comment
Вы думаете, что тип MIME, являющийся JSON, может вызвать некоторые из моих проблем? Я попытаюсь изменить его на JS, потому что это то, что на самом деле сейчас.   -  person Adam H    schedule 08.02.2019

Ответы (1)


arrow_upward
5
arrow_downward

Учитывая, что определение вашего компонента является (или было) 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 файла может оказаться сложной задачей.

person Phil    schedule 07.02.2019
comment
Большое спасибо за помощь, это фантастика, но не могли бы вы немного рассказать о том, как будет выглядеть тело jsonpCallbackFunctionName? - person Adam H; 08.02.2019
comment
@AdamH не уверен, что ты имеешь в виду, но что такое Vue.http? Это Аксиос? Если это так, я не думаю, что он поддерживает JSONP из коробки. - person Phil; 08.02.2019
comment
Я могу переключиться на получение, на данный момент мы находимся в фазе POC. Vue.http исходит от vue-resource, возможно, вы видели, что он раньше использовался как this.$http. - person Adam H; 08.02.2019
comment
@AdamH почти уверен, что vue-resource больше не используется. Честно говоря, я не рекомендую вариант JSONP, так как он либо вводит требования на стороне сервера к вашему удаленному ресурсу, либо вводит глобальные функции в ваше приложение Vue. Я бы просто придерживался преобразования JSON - person Phil; 08.02.2019
comment
Хорошо, большое спасибо за вашу помощь. Я бы проголосовал дважды, если бы мог, но вместо этого вам придется принять мою вечную благодарность. - person Adam H; 08.02.2019
comment
@AdamH Я удалил пример JSONP, так как он кажется достаточно неработоспособным. - person Phil; 08.02.2019