Vite のファイル構造を理解する: なぜindex.html がルートに属するのか

Vite を使用する際のよくある質問は、index.html ファイルの場所です。 Webpack などの従来のビルド ツールとは異なり、Vite では、index.html がパブリック ディレクトリではなくプロジェクトのルート ディレクトリに配置されている必要があります。

index.html がパブリック ディレクトリにある場合はどうなりますか? HTTP ERROR 404 エラーが発生します。これは、サーバーは実行されているがリソースが見つからないことを示します:

<code>此localhost页面找不到
找不到网页地址：http://localhost:5173/
HTTP ERROR 404</code>

Vite がこれを行う必要があるのはなぜですか?

Vite は、プロジェクトを最適化してパッケージ化するためのエントリ ポイントとして、index.html を使用します。これをルート ディレクトリに配置すると、Vite で次のことが可能になります。 • リンクされたリソース (JS、CSS など) を効率的に検出して処理します。 • 開発中にスクリプトとスタイルを直接インライン化します。 • モジュール解決のための正確なパスを提供します。

正しいプロジェクト構造

これは、基本的な Vite プロジェクトの予想される構造です:

<code>my-project/
├── index.html      // 根目录入口点
├── src/            // 源文件（组件、样式等）
│   └── main.js
├── public/         // 静态资源（Vite不处理）
│   └── favicon.ico
└── vite.config.js</code>

以上がVite のファイル構造を理解する: なぜindex.html がルートに属するのかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。