Vite はエラー レポートを動的にインポートし、vite は vue-router を設定し、動的インポート コンソール エラー レポートをカプセル化します。

const _import = (file: String) => () => import(`@/${file}.vue`)
const routes = [
  {
    path: '/',
    name: 'home',
    component: _import('views/home')
  },
]

コンソールは次のエラーを報告します。

上記の動的インポートは Vite では解析できません。サポートされている動的インポート形式については、https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations を
参照してください 。これをそのままにしておく場合は、/* @vite を使用できます。この警告を抑制するには、import() 呼び出し内の -ignore */ コメントを使用します。 

プラグイン: vite:import-analysis

または、ブラウザ コンソールでエラーが報告されます。

 不明な変数の動的インポート: ../views/home.vue

これは、上で定義した _import 動的インポート関数を Vite で分析できないことを意味します。この方法で使用する必要がある場合は、import() を使用して内部の /* @vite-ignore */ アノテーションを呼び出し、この警告を無視できます。

その後、このコメントを使用した後、エラーはなくなりましたが、必要なコンポーネントを動的にインポートできず、表示が空白になりました。

それからブレインストーミングをしました

const _import = (file: String) => () => import(`@/views/${file}.vue`)
const routes = [
  {
    path: '/',
    name: 'home',
    component: _import('home')
  },
]

その後、コンポーネントが正常に表示されます。。。。。。。。。

なぜ？？？？？

公式サイトで import.meta.glob を見つけた後、このように書き換えることも可能ですが、パスを書くのが面倒なので最初のものを使いましょう。

const modules = import.meta.glob('@/views/*.vue')

const routes = [
  {
    path: '/',
    name: 'home',
    component: modlues['/src/views/home.vue']
  },
]

しかし、なぜパスを追加することで最初のパスを動的にインポートできるのか、私はまだ疑問に思っています。ぜひ説明してください。！

-------------------------------------------------- ---------------

たまたま書類をめくって見つけたのですが、

vite はパスの 1 つのレイヤーのみをサポートしていることがわかりました。。。。