Understanding Vite's File Structure: Why index.html Belongs at the Root

A common question when using Vite is the location of the index.html file. Unlike traditional build tools such as Webpack, Vite requires that your index.html be located in the project root directory, not the public directory.

What happens if index.html is located in the public directory? You will get HTTP ERROR 404 error, which indicates that the server is running but the resource cannot be found:

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

Why does Vite need to do this?

Vite uses index.html as the entry point to optimize and package your project. Placing it in the root directory allows Vite to: • Efficiently detect and handle linked resources (e.g., JS, CSS). • Inline scripts and styles directly during development. • Provide accurate paths for module resolution.

Correct project structure

This is the expected structure of a basic Vite project:

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

The above is the detailed content of Understanding Vite's File Structure: Why index.html Belongs at the Root. For more information, please follow other related articles on the PHP Chinese website!