Vite+React项目部署Vercel后Public文件夹资源404问题排查

核心原因 #

Vite对public目录下的资源处理逻辑，和通过import引入的资源完全独立：

• 本地构建时，public下的文件夹会原封不动复制到dist根目录
• 你配置的Rollup output.assetFileNames规则，只对通过import/require引入的资源生效，对public目录下的静态资源不产生作用。部署Vercel后出现404，大概率是配置逻辑冲突，或是Vercel的路径解析规则和本地不一致导致的。

解决步骤 #

1. 确认Vercel构建配置 #

• 检查Vercel项目设置里的构建命令是否为vite build，不要添加任何会修改dist目录结构的额外命令
• 确认输出目录设置为dist（Vercel默认会识别，但手动核对更稳妥）

2. 调整vite.config.ts与资源存放逻辑 #

如果想让所有图片资源统一归到assets/img目录，建议：

• 把public/Images和public/Icons里的资源，迁移到src/assets/img目录下
• 代码中通过import引入资源（比如import avatar from '@/assets/img/avatar.png'），此时Rollup的assetFileNames规则会生效，构建后资源会自动归类到dist/assets/img
• 若必须保留public目录的资源，确保代码里的引用路径是根相对路径（比如/Images/bg.png），同时删除Rollup配置中可能干扰public资源的规则，避免Vercel构建时混淆路径解析逻辑

3. 验证本地与部署的目录结构 #

• 本地执行vite build后，打开dist目录，确认public下的文件夹是否存在、资源路径是否正确
• 部署Vercel后，查看部署日志，确认构建过程无报错，且dist目录结构和本地完全一致

常见误区 #

• 不要同时用public目录存放静态资源，又配置Rollup的asset规则，两者处理逻辑独立，极易引发路径混乱
• Vercel部署时会自动解析dist目录，但如果自定义了Rollup输出规则，要确保规则覆盖所有目标资源类型，且路径是相对于Vercel部署根目录的相对路径

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