Vite React项目移动index.html至public目录后遇404错误求助

你的问题根源在于错误设置了Vite的root目录，导致开发服务的根路径变成public，而源码目录src并不在public下，浏览器无法访问到目标文件。按以下步骤修复：

1. 恢复Vite的根目录配置
   打开vite.config.js，删除root: "public"这一行，保持root为默认的项目根目录（即包含package.json的目录）。

2. 修正index.html中的脚本路径
   编辑public/index.html，将脚本路径从../src/main.jsx改为绝对路径/src/main.jsx。这样浏览器会从服务根目录（项目根）出发查找src目录，就能正确定位到main.jsx。

3. 启动服务并访问
   运行npm run dev，访问http://localhost:5173/index.html即可正常加载页面。如果希望启动服务时自动打开该地址，可以在vite.config.js中添加配置：

   export default defineConfig({
     server: {
       open: '/index.html'
     }
   })
   

原配置失效的原因 #

当你把root设为public时，Vite的开发服务根路径被限定在public目录内。此时浏览器请求http://localhost:5173/src/main.jsx，会去public目录下查找src文件夹，但你的src实际在项目根目录，因此返回404错误。保持root为项目根目录后，public作为Vite默认的静态资源目录，既可以访问其中的index.html，也能正常加载项目根下的src源码文件。

内容的提问来源于stack exchange，提问作者Zglob