Vercel部署静态网站后图片与CSS未加载问题求助

1. 检查资源路径大小写 #

Vercel部署环境区分大小写，但本地开发环境（如Windows）通常不区分。如果代码里引用的资源路径大小写和仓库中实际文件名不一致，就会导致加载失败。

• 核对CSS文件、图片文件的引用路径与仓库中文件名的大小写是否完全匹配，比如Styles.css和styles.css会被视为两个不同文件。

2. 修正相对路径引用 #

检查HTML中的资源引用路径是否为正确的相对路径：

• 若CSS文件在根目录的styles文件夹下，正确引用应为 <link rel="stylesheet" href="./styles/styles.css">，避免使用错误的层级路径或绝对路径。
• 图片引用同理，确保src属性的路径与文件实际存放位置对应，比如<img src="./assets/logo.png">。

3. 排查Vercel部署配置 #

如果项目中有vercel.json配置文件，检查是否存在错误的路由重写或资源缓存规则，导致静态资源被拦截。若无该文件，无需额外添加，Vercel默认支持静态资源部署。

4. 确认资源已提交至仓库 #

检查所有CSS、图片文件是否已提交并推送到GitHub仓库，同时确认.gitignore规则未误排除assets、styles这类存放静态资源的文件夹。

5. 强制清除浏览器缓存 #

浏览器缓存可能导致新部署的资源无法加载，使用快捷键强制刷新页面：

• Windows/Linux：Ctrl+Shift+R
• Mac：Cmd+Shift+R

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