如何让Vite开发服务器提供嵌套文件夹中的图片服务

• 修正资源引用路径
  Vite开发环境下，public目录下的资源必须以根路径 / 开头引用。比如图片要写成 /uploads/2/6337005fd6d4d.png，favicon.ico要写成 /favicon.ico，不能用相对路径或者不带斜杠的路径。

• 核对目录与文件信息
  确认项目根目录下存在public/uploads/2/6337005fd6d4d.png，文件名、文件夹名的大小写完全匹配——开发服务器对路径大小写敏感，哪怕一个字母大小写错了都会404。同时要保证public文件夹在项目根目录，不是src的子目录。

• 检查Vite配置
  打开vite.config.js/ts，确认没有修改publicDir配置项，默认值就是'public'。如果被自定义成其他路径，Vite会找不到public下的资源。正确的基础配置示例：

  import { defineConfig } from 'vite'
  import react from '@vitejs/plugin-react'
  
  export default defineConfig({
    plugins: [react()],
    publicDir: 'public' // 可省略，默认就是这个值
  })
  

• 清除缓存重启服务
  关闭浏览器页面，用Ctrl+C终止Vite开发服务，然后重新执行npm run dev启动服务，再打开页面测试——缓存问题偶尔会导致这类加载异常。

内容的提问来源于stack exchange，提问作者Bobby Wan-Kenobi