修改文件名大小写后部署Vercel出现编译报错及页面404求助

问题根因 #

你遇到的是Git默认大小写不敏感+Vercel构建缓存叠加导致的问题：

1. Git默认配置下不区分文件名大小写，本地修改文件名大小写后往往不会被识别为变更，推送到远程仓库的还是旧的大写文件名，Vercel拉取代码时找不到小写的导入路径就会触发编译报错
2. 旧的构建缓存会保留原有的/ThankYou路由规则，就算后续改了文件名，缓存没清的情况下新的/thankyou路由不会生效

解决步骤 #

1. 强制Git识别文件名大小写变更 #

本地项目目录下执行以下命令：

• 先开启Git大小写识别：
  git config core.ignorecase false
• 将旧文件名的文件从Git暂存区移除（不会删除本地文件）：
  git rm --cached components/NavBar.tsx
git rm --cached pages/ThankYou.tsx
• 将修改为小写后的新文件加入暂存区：
  git add components/navbar.tsx pages/thankyou.tsx
• 提交变更并推送到远程仓库：
  git commit -m "fix: 统一组件和页面文件名为全小写"
git push

2. 无缓存重新部署Vercel #

进入Vercel对应项目的部署列表，选择最新一次提交的部署选项，点击「Redeploy」，必须取消勾选「Use existing build cache」选项，避免复用旧的缓存导致问题残留。

3. 确认导入路径匹配 #

全局检查所有代码中的导入语句，确保所有导入NavBar组件的语句路径都是全小写的../components/navbar，没有残留大写的NavBar写法。

补充问题解答 #

如果你的变更检测截图显示了文件名从大写改为小写的变更记录，说明Git已经成功识别到了文件名变更，只需按上面的步骤执行即可。如果没有显示相关变更，就按第一步的git rm --cached方法强制更新Git的文件记录即可。

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