Блог

Главная - Вопросы по программированию - федерация модулей webpack динамический импорт vuejs()

федерация модулей webpack динамический импорт vuejs()

#webpack #vue-router #vuejs3 #webpack-module-federation

Вопрос:

Я пытаюсь динамически вызывать некоторые компоненты в зависимости от названия маршрута. Мои компоненты поступают из федерации удаленных модулей, поэтому мне нужно сохранить эту структуру : импорт («модуль/модуль»), если нет других способов ее определения.

вот моя конфигурация веб-пакета

  new ModuleFederationPlugin({
      name: "core-front",
      remotes: {
        test: "test@http://localhost:8081/remoteEntry.js",
        test2: "test2@http://localhost:8082/remoteEntry.js",
      },
      exposes: {},
      shared: require("./package.json").dependencies,
    }),

Поэтому я хотел бы загрузить тест или тест2, если мой маршрут является локальным хостом:8080/приложение/тест

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

 <template>
  <component :is="name"></component>
</template>

<script setup>
import {computed, defineAsyncComponent} from "vue";
import {useRoute} from "vue-router";
const route = useRoute();

const capitalizer = (string) => {
  return (string amp;amp; string[0].toUpperCase()   string.slice(1)) || "";
};

const name = computed(() => {
  const appName = route.params.name;
  const appNameCapitalize = capitalizer(appName);

  return defineAsyncComponent(() => import(`${appName}/${appNameCapitalize}`));
});
</script>

Я получаю эту ошибку :
Не пойманный (в обещании) Ошибка: Не удается найти модуль «тест/Тест»

(хотя название модуля правильное…)

Это работает:

 const name = computed(() => defineAsyncComponent(() => import("test/Test")));

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

Ответ №1:

если в React использовать приведенные ниже методы для загрузки динамического модуля, я скажу, что они будут очень похожи в VUE tho…

 function loadComponent(scope, module, baseModuleType) {
   return async () => {
    await __webpack_init_sharing__('default');
    const container = window[scope];

    await container.init(__webpack_share_scopes__.default);

    const factory = await window[scope].get(module);
    const Module = factory();
    return { default: Module[baseModuleType] };
  };
}

const Component = React.lazy(loadComponent('App2', `./components/${componentsType}`, type));
 
 <React.Suspense fallback="Loading System">
     <Component />
</React.Suspense>

Если возникнут какие-либо дополнительные вопросы, обратитесь ниже:

https://webpack.js.org/concepts/module-federation/#dynamic-remote-containers

https://dev.to/waldronmatt/tutorial-a-guide-to-module-federation-for-enterprise-n5

Метки: