Vue.js - Можно ли использовать динамический импорт Javascript для загрузки компонентов с другого сервера? - PullRequest
Новая
       12

Vue.js - Можно ли использовать динамический импорт Javascript для загрузки компонентов с другого сервера?

0 голосов
/ 19 февраля 2019

Context

Я должен создать приложение Vue.js в качестве пользовательского интерфейса моего REST API Back-end.Он будет отображаться для каждого клиента.

Это приложение отображает список элементов, которые должны быть обработаны (с небольшим рабочим процессом: открыт, выполняется, выполнен).

Некоторые из моих клиентов запрашивают конкретное и другое представление для этого списка: они хотят, например, чтобы список отображался в другом макете или с дополнительными данными из их внутренних приложений.

Моя идея

Итак, мне нужно создать конкретные компоненты Vue.js для этих клиентов, но я не хочу «загрязнять» основную базу кода моего приложения всеми компонентами для этих клиентов.Я хочу, чтобы эти представления обрабатывались в специально выделенной базе кода.

Мне было интересно, смогу ли я использовать компоненты динамического импорта / асинхронности ( Статья по оптимизации с использованием динамического импорта и ОфициальноVue.js документ для динамического импорта ) для загрузки этих компонентов на основе клиента, который использует приложение.Эти компоненты будут загружены с другого сервера , а не с сервера, обслуживающего основное приложение Vue.js.

Фактический способ динамической загрузки компонентаэто: 

'my-component': () => import('./my-async-component')

Можно ли сделать что-то вроде: 

'my-component': () => import('http://myspecificclient.mydomain.com/my-async-component')

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

Ответы [ 2 ]

0 голосов
/ 10 апреля 2019

В этой недавней статье (7 апреля 2019 г.) Маркуса Оберленера представлен способ сделать это:

https://markus.oberlehner.net/blog/distributed-vue-applications-loading-components-via-http/?utm_source=Vue.js+Developers&utm_campaign=a23e0b1135-EMAIL_CAMPAIGN_2019_04_02_10_08_COPY_01&utm_medium=email&utm_term=0_ae2f1465e2-a23e0b1135-209131157

Выдержка: 

// This does not work.
const MyComponent = () => import('https://distribution.server/MyComponent.js');

В идеале, мы могли бы сделать это так, как вы видите выше.Но это не работает, потому что ни webpack, ни собственная реализация import () не могут работать с внешними ресурсами.

В следующем примере кода вы можете увидеть нашу собственную реализацию import (), которая работает с внешними ресурсами. 

// src/utils/external-component.js
export default function externalComponent(url) {
  return new Promise((resolve, reject) => {
    const name = url.split('/').reverse()[0].match(/^(.*?)\.umd/)[1];
    const script = document.createElement('script');
    script.async = true;
    script.addEventListener('load', () => {
      resolve(window[name]);
    });
    script.addEventListener('error', () => {
      reject(new Error(`Error loading ${url}`));
    });
    script.src = url;
    document.head.appendChild(script);
  });
}

import externalComponent from '../utils/external-component';

const MyComponent = () => externalComponent('http://localhost:8200/MyComponent/MyComponent.c9c0abb8e999d0e5654e.umd.min.js');

export default {
  name: 'MyOtherComponent',
  components: {
    MyComponent,
  },
  // ...
}
0 голосов
/ 19 февраля 2019

Вы можете использовать ajax ... 

var xhr = new XMLHttpRequest;

xhr.open('GET', '[Your url here]', true)

Но я не совсем уверен, так как вы сказали, что хотите импортировать его с другого сервера

...