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