2

ルート名に応じて、いくつかのコンポーネントを動的に呼び出そうとしています。私のコンポーネントはリモートモジュールフェデレーションから来ているので、それを定義する他の方法がない限り、その構造を維持する必要があります: import('module/Module') 。

ここに私のwebpack設定があります

 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,
    }),

したがって、ルートが localhost:8080/app/test の場合、test または test2 をロードしたいと思います

名前を動的に書き換えて import() 内で使用しようとしましたが、機能しません。

<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 && string[0].toUpperCase() + string.slice(1)) || "";
};

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

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

次のエラーが表示されます: Uncaught (in promise) エラー: モジュール 'test/Test' が見つかりません

（モジュール名は正しいですが...）

これは機能します：

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

インポートでは動的な名前を使用できないようです。この問題を回避する方法はありますか? 後で公開モジュールの動的リストも使用したいので、名前をハードコーディングしたくありません。

4

1 に答える 1