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 중국어 웹사이트의 기타 관련 기사를 참조하세요!