A Vite project keeps index.html in the project root, the source code in src, and static files in public. The Vite configuration, vite.config.js, sits in the root next to package.json.
my-vite-app/
├── public/ # Static assets served directly
│ └── favicon.ico
├── src/ # Source code
│ ├── assets/ # Assets processed by Vite
│ ├── components/ # Components
│ ├── main.js # Application entry point
│ └── style.css # Styles
├── index.html # HTML entry point (in root!)
├── package.json
└── vite.config.js # Vite configuration
Two things differ from other bundlers. index.html lives in the root, not in a public folder, because it is the entry point Vite serves. And Vite processes the source files in src, while it serves the files in public directly and copies them to the build output unchanged.
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
The diagram below the answer is the concept . Jump to it ↓