Vue3.0+vite2は動的非同期コンポーネントの遅延読み込みを実装します

<テンプレート>
 <p @click="onChangeContents('./pages/contents/gp/gp.vue')">郭 ペイ</p>
 <p @click="onChangeContents('./pages/contents/systemManges/xtcs.vue')">システムパラメータ</p>
 <p>{{currentTabComponent}}</p>
 <!-- <サスペンス> -->
 <コンポーネント:is="DefineAsyncComponent({
     //ファクトリー関数ローダー: Modeuls[currentTabComponent],
     // // デフォルト値: 無限大 (つまりタイムアウトなし、単位: ミリ秒)
     タイムアウト: 3000、
    })"></コンポーネント>
 <!-- </サスペンス> -->
</テンプレート>
<script lang="ts">
 輸入 {
  定義コンポーネント、
  非同期コンポーネントの定義、
  反応的、
  参照
 } から 'vue'
 エクスポートデフォルトdefineComponent({
  名前: 'アプリ'、
  設定（） {
   //vite は指定されたパスのすべてのモジュールをロードします const Modeuls = import.meta.glob('./pages/contents/*/*');
   const onChangeContents = function(URL) {
    currentTabComponent.value = URL;
    コンソールログ(現在のタブコンポーネント)
   }
   currentTabComponent を ref('./pages/contents/systemManges/xtcs.vue') とします。
   非同期コンポーネントを定義します。
   戻る {
    非同期コンポーネントの定義、
    現在のタブコンポーネント、
    コンテンツの変更時、
    モデル
   }
  },
 })
</スクリプト>