标签导航:

理解vite的文件结构:为什么indexhtml属于根

Vite项目中index.html文件的位置是一个常见问题。不同于Webpack等传统构建工具,Vite要求index.html必须位于项目根目录,而非公共目录。

如果将index.html放置在非根目录下,启动开发服务器后,您可能会遇到HTTP 404错误,提示服务器找不到资源:

此 localhost 页面找不到
找不到网页地址:http://localhost:5173/ 的网页
HTTP 错误 404

为什么Vite需要index.html位于根目录?

Vite使用index.html作为项目的入口点,进行优化和打包。将index.html放在根目录下,Vite才能:

  • 高效地检测和处理链接资源(例如JS、CSS文件)。
  • 在开发过程中直接内联脚本和样式。
  • 为模块解析提供准确的路径。

正确的项目结构

一个标准的Vite项目结构如下:

my-project/
├── index.html      // 根目录入口文件
├── src/            // 源文件 (组件,样式等)
│   └── main.js
├── public/         // 静态资源 (Vite不处理)
│   └── favicon.ico
└── vite.config.js