新建React项目中如何配置Vite识别public目录下的index.html？

问题根源 #

Vite默认以项目根目录作为root（项目根目录），入口文件index.html必须放在这个root目录下；而public目录是用来存放无需编译的静态资源（如图片、字体文件）的，Vite不会在这里查找入口文件，所以你把index.html放在public里会触发404错误。

两种解决办法 #

办法1：遵循Vite默认约定（推荐） #

直接把public目录下的index.html移到项目根目录，无需修改vite.config.js，重启开发服务即可正常运行。这是Vite官方推荐的项目结构，后续维护更省心。

办法2：强制指定root为public目录（不推荐） #

如果必须把index.html放在public目录，需要修改vite.config.js的配置：

1. 启用root配置，指定为./public，让Vite把public目录当成项目根目录来查找入口文件
2. 修改publicDir配置，避免和root目录下的文件夹冲突（因为默认publicDir是root下的public文件夹）

修改后的配置代码：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
    root: './public',
    publicDir: '../static', // 将静态资源目录改为项目根目录下的static文件夹
    plugins: [react()],
})

注意：这种配置会偏离Vite的默认结构，后续可能遇到静态资源路径引用等问题，除非有特殊需求，否则不建议这么做。

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