Vue загрузить компонент _completely_ динамический

Question

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

Я хочу иметь возможность развертывать «Приложения» как компоненты Vue на совершенно другом бэкэнде., так что бэкэнд может возвращать полные .vue файлы через API.Структура бэкэнда не имеет значения.Поэтому мне нужно, чтобы в моем приложении Vue было достигнуто следующее:

• Пользователь щелкает имя «приложения» в приложении Vue внешнего интерфейса
• Имя «приложения» запрашивается асинхроннона сервере
• сервер возвращает файл .vue SFC с HTML, JS и CSS в нем.
• Интерфейс компилирует файл в компонент Vue с шаблоном и функциональностью
• .frontend вставляет компонент в представление, и компонент может взаимодействовать с остальной частью приложения (магазин Vuex и т. д.)

Я обнаружил v-runtime-template , который, кажется,быть решением для шаблонов.Но это не включает часть JS, не так ли?

Дополнительно: Я думаю, что я пытаюсь что-то вроде VueJS Dynamic Components , но URL-адрес запроса имеетустанавливается динамически.

Answer 1

У Маркуса Оберленера есть статья , которая, я думаю, решает вашу проблему.Решение заключается в использовании функции externalComponent (url), которая заменяет функцию import ().Я скопировал функцию Маркуса здесь для удобства:

// src/utils/external-component.js
export default async function externalComponent(url) {
  const name = url.split('/').reverse()[0].match(/^(.*?)\.umd/)[1];

  if (window[name]) return window[name];

  window[name] = new Promise((resolve, reject) => {
    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);
  });

  return window[name];
}

Согласно статье, вы можете использовать вспомогательную функцию externalComponent () для загрузки внешних компонентов почти так же, как мы привыкли к import ().

Answer 2

Вы можете получить, используя http-vue-loader .Как правило, это не рекомендуется для производства, но ваш вариант использования может сделать это целесообразным.Очевидно, что будут некоторые ограничения (например, import в других модулях)