教程 · 编程上线
上线后图片字体全 404：查 base 路径和 CDN 前缀
区分构建路径、部署子目录和 CDN 前缀三种原因，让静态资源在线上正确加载。
前置：项目部署在子路径或 CDN 后，页面能打开但图片、字体加载失败。
材料：项目配置、构建产物、CDN 控制台、浏览器网络面板
材料：项目配置、构建产物、CDN 控制台、浏览器网络面板
步骤
1. 先看 404 的完整地址
在网络面板里看请求的实际地址，多出来的前缀或缺失的目录层级会直接暴露问题；不要只看控制台的一句加载失败。
2. 确认部署在根路径还是子目录
部署在子目录时，构建配置里的基础路径要和实际访问路径一致；配成根路径，资源会去域名根目录找，必然 404。
3. 核对 CDN 前缀
使用 CDN 时确认资源地址前缀、回源路径和缓存规则，路径多一层或少一层都会 404；改完先刷新缓存再测。
4. 检查文件名和扩展名
确认构建产物里确实存在该文件，注意大小写和带哈希的文件名；哈希变了但页面引用旧名字，同样会 404。
5. 清缓存后按真机复测
清浏览器缓存和 CDN 缓存，用无痕窗口和手机各看一次；本地缓存很容易让人误以为已经修好，手机端也要看一次。
做完检查
- 资源请求全部返回 200
- 构建配置的基础路径与部署路径一致
- 清除缓存后页面样式和字体正常
常见错误
- 把本地绝对路径硬编码进代码
- 部署在子目录却按根路径构建
- 只清浏览器缓存，忘了 CDN 缓存
相关工具
同类教程
本地能跑线上 404：先查文件名大小写，再查构建产物
定位大小写、扩展名和路径别名导致的资源 404，用构建产物和大小写敏感环境验证修复。
查看 →密钥被打进了前端包：先分清公开变量和私密变量
识别构建时被内联到前端的变量，把密钥移到服务端并轮换已泄露的凭证。
查看 →单页应用刷新就 404：把未知路径回退到 index.html
配置服务器或托管平台的路由回退规则，让前端路由的深链接刷新和直接访问都能正常打开。
查看 →更新时间：2026-10-29 · 平台规则/软件版本会变；操作前保留原件，以实际页面为准。
跨库学习路径
按共同关键词匹配，不是随机推荐；从任务到提示词/教程/项目继续走。