На основе посадки qiankun развертывание "ямы" для скалолазания с микро-передним концом.

внешний интерфейс
❝

Фронтир: В первом полугодии микрофронтенд был очень популярен.Так сложилось, что был такой сценарий применения с точки зрения потребностей бизнеса.Мы сделали технический выбор для текущего решения микрофронтенда. Интерфейсное решение, разработанное Ant Financial, Qiankun подверглось онлайн-приложению, которое было полностью протестировано и отшлифовано, и, наконец, открытое исходное код, и qiankun был наконец выбран в качестве точки входа в нашу облачную архитектуру продукта. Однако официальных документов о онлайн-развертывании мало.Многие детские тапки могут играть только локально, и они толком не прошли весь замкнутый цикл.Поэтому, объединившись с собой, буду разбираться в "тех ямках", встретившихся при посадке цянькунь. Надеюсь, это поможет вам

❞

1.🍵 чайная закуска

❝

Эта статья не будет знакомить вас с «прошлой жизнью и настоящей жизнью» о цянькунь. Дополнительные концепции дизайна см.ДокументацияЕсли у вас есть детская обувь, которая хочет узнать о других решениях для микроинтерфейса, вы также можете просмотреть то, что Шуцзян поделился ранее.Микро интерфейсные вещи

❞

Например: у нас есть такой сценарий, у меня есть интерфейс входа в портал (база основного приложения), после результатов входа в систему можно переключать разные подприложения, есть два подприложения A и B следующим образом, и оба до них развернуты независимо и могут быть доступны отдельно, но теперь мы хотим использовать qiankun, чтобы «встроить» их в базу для их загрузки.Давайте посмотрим фактическую операцию ниже.

Выше приведена схема доступа к подприложениям через доменные имена. Далее давайте посмотрим на представление представления. Заголовок заголовка и левое меню бокового меню относятся к порталу портала, а правая область — это представление, которое отображает переключение подприложений Ожидаемый эффект: при посещенииdev.portal.com/aКогда доменное имя переключается на подприложение A, левое меню также переключает разные данные в соответствии с разными приложениями.

Вы можете спросить, не лучше ли использовать iframe напрямую? На самом деле не ароматный, в основном несколько ограничений

  • Проблемы связи между родительскими и дочерними приложениями
  • Проблема обмена файлами cookie (можно использовать систему единого входа)
  • Представление взаимодействия не работает должным образом

1.1 На что следует обратить внимание при регистрации подзаявок?

❝

👦 А Мин: Как qiankun зарегистрировал дополнительное приложение?

❞

Цянькунь прошелregisterMicroApps(apps, lifeCycles)API для регистрации подприложений, см. подробную документациюнажмите на меня 👉Он используется для реализации функции автоматической загрузки соответствующего суб-приложения при изменении URL-адреса браузера.В сочетании с приведенным выше примером мы пытаемся зарегистрировать суб-приложение в базе main.js

в основном включает:

  • entry: адрес входа суб-приложения, например, у нас сейчас есть два суб-приложения A и B, тогда конфигурация здесь это их доменное имя доступа к ресурсам или ip
  • render: по существу преобразование контейнера, контейнер используется для определения селектора или экземпляра элемента узла контейнера подприложения, вот фактический пример
  • activeRule: Правило активации суб-приложения, то есть по какому маршруту будет идти доступ к доменному имени или ip, настроенному записью fetch, мы используемgetActiveRuleчтобы завершить матч, давайте посмотримgetActiveRuleРеализация этой функции проходит в текущем местоположении в качестве параметра, а затем в соответствии с возвращаемым значением функции, если возвращаемое значение истинно, это означает, что текущее подприложение будет активировано, затем вызовите конфигурацию записи записи

соответствует следующим образом

✅ https://dev.portal.com/a

✅ https://dev.portal.com/a/anything/everything

🚫 https://dev.portal.com/c

После успешного сопоставления qiankun использует выборку для получения статических ресурсов сопоставленного подприложения.

1.2 Как разрешить междоменный доступ к ресурсам?

❝

👦 А Дай: Разве ты не можешь так пересекать домены? База https://dev.portal.com/ получает ресурсы подприложения a https://dev.monitor.com/a в соответствии с политикой браузера того же происхождения (браузер принимает политику того же происхождения , который запрещает загрузку страницы или выполнение любого скрипта из домена, отличного от его собственного источника) не должен иметь возможности получить его, очевидно, междоменный

❞

Ответ: Да, так как qiankun использует выборку для получения URL-адреса статического ресурса, настроенного при регистрации подприложения, все статические ресурсы должны поддерживать междоменный доступ, тогда вам необходимо установить разрешенный источник, простую настройку можно увидеть ниже.

  • Access-Control-Allow-Origin: Междоменное использование на стороне сервера запрещено. Только путем настройки NginxAccess-Control-Allow-Origin *После этого сервер может принимать все источники запросов (Origin)
  • Access-Control-Allow-Headers: Установите поддерживаемый Content-Type

1.3 В чем проблема сбоя загрузки подприложения?

❝

👦 А Мин: Междоменное решение решено, но по-прежнему не удается получить статические ресурсы подприложения a? В чем проблема?

❞

Эта ошибка возникает:Application died in status LOADING_SOURCE_CODE: You need to export the functional lifecycles in xxx entry

Ответ: Ваша упаковочная осанка неверна

❝

В проекте vue-cli 3x метод вывода необходимо настроить, настроив вывод в vue.config.js, как показано ниже 👇

❞
  • pubilcPath: Основное решение - решить проблему некорректных адресов таких как скрипты, стили, картинки и другие динамически подгружаемые подприложения
  • output.library: оно должно быть таким же и уникальным, как имя основного приложения при регистрации вспомогательного приложения.
  • output.libraryTarget:umd: Экспорт в формате umd, может поддерживать inport, требует введения и скрипта

Затем создайте файл publichPath и добавьте его в main.js.

1.4 Как следует настроить publichPath субприложения?

❝

👦 А Мин: Конфигурация вывода упаковки была изменена, но почему путь publichPath настроен как /a?

❞

Расширение: используйте доменное имя доступа приложения, упомянутое выше dev.monitor.com/a.

Теперь, если браузер хочет правильно получить файлы css в статических ресурсах приложения, он посетит dev.monitor.com/a/css/common.css.

В основном есть два случая:

  • Если publichPath настроен по умолчанию или настроен как /, сгенерированный index.html обращается к ресурсу неверно, поскольку он будет обращаться к dev.monitor.com/css/common.css, а не к ресурсам приложения.
  • Если он настроен как /a, ресурсы, к которым обращается сгенерированный index.html, могут быть
❝

👦 Чувак: Путь publichPath настроен как./Относительный путь в порядке?

❞

Ответ: Также возможно, с конфигурацией как/aдоступ к тому же

1.5 Как убедиться, что исходное приложение работает нормально, но может быть интегрировано в базовый портал

❝

👦 А Мин: Мое приложение раньше запускалось и развертывалось отдельно, будет ли это иметь какое-то влияние, если я интегрирую его в базовый портал через qiankun?

❞

Ответ: Используйте эту глобальную переменную, чтобы определить, работает ли она в настоящее время в основном приложении qiankun.

Это:window.__POWERED_BY_QIANKUN_Для чего это можно использовать? Пожалуйста, смотрите ниже👇

  • Работать независимо:window.__POWERED_BY_QIANKUN__Если false, выполните mount, чтобы создать объект vue.
  • Беги на цянькуне:window.__POWERED_BY_QIANKUN__Если true, монтирование не выполняется

1.6 Как родительское приложение передает утилиты и данные дочернему приложению

❝

👦 Старый Ван по соседству: если я хочу успешно поделиться личными данными, полученными приложением для входа на портал, с дополнительными приложениями, и есть некоторые общедоступные методы, что мне делать?

❞

Ответ: Вы можете поделиться определенным msg через реквизиты при регистрации суб-приложения.

  • msg.data: Делитесь данными управления состоянием хранилища с подприложениями.
  • msg.prototype: определить некоторые данные прототипа, например, находится ли он в контексте qiankun

После того, как родительское приложение определено, как его получает дочернее приложение? Проходя и назначая данные реквизита прототипу vue субприложения, проходя и назначая данные реквизита субприложению до того, как субприложение будет смонтировано.

1.7 Режим маршрутизации по истории, как настроить ngnix для нормального доступа?

❝

👦 А Ю: Я вижу, что режим маршрутизации, к которому вы обращаетесь, не хэш, а режим истории.Как вы решаете проблему 404 при обновлении страницы?

❞

Ответ: Добавить try_files через конфигурацию nginx.Также есть проблема в режиме истории, то есть при обновлении страницы, если нет подходящей конфигурации, будет ошибка 404. Для этого смотрите дополнительную настройку в nginx. вернуть html главной страницы

  • try_files: используется для решения проблемы с доступом к 404, когда nginx не может найти ресурсы, требуемые клиентским клиентом

  • proxy_pass: он в основном используется для настройки обратного прокси-сервера интерфейсного шлюза, который может сделать API, доступ к которому осуществляется в родительском и дочернем приложениях, согласованным и предотвратить междоменные проблемы интерфейса.

Чтобы узнать больше об изучении конфигурации ngnix, ознакомьтесь с тем, что ранее писал Шуцзян.nginx эти вещи

1.8 Предложение: Для детской обуви, которая только изучает микроинтерфейс.

Впервые изучая микро-фронтенд детской обуви, можно поучиться у Питера.chunchaoФреймворк микро-интерфейса, его будет легче понять и начать работу.ссылка на гитхаб

🌲Предыдущие статьи Соуса:

Пожалуйста, выпейте 🍵 Не забудьте подключиться три раза~

1. После прочтения не забудьте поставить лайк 🌲 соусу, там есть 👍 и мотивация

2. Обратите внимание на интересные вещи в интерфейсе официального аккаунта и пообщайтесь с вами об интересных вещах в интерфейсе.

3. Статья размещена на GithubfrontendThingsСпасибо, Стар✨

Категории