HTML静态资源404主因是浏览器请求路径与文件实际位置不匹配：相对路径以当前页面URL为基准拼接，非文件目录；应优先使用根相对路径（/开头）或严格校准<base>标签、框架静态配置及服务器映射规则。
HTML静态资源404错误，八成不是服务器挂了，而是浏览器请求的路径和文件实际位置对不上——根源在路径解析逻辑被误用，不是“找不到文件”，而是“找错了地方”。
浏览器怎么解析 src 和 href 路径
浏览器永远以当前页面的完整 URL 为基准拼接相对路径，不是以 HTML 文件所在目录为准。比如访问 http://localhost/user/profile，页面里写 <img src="avatar.jpg">，浏览器就会去请求 http://localhost/user/profile/avatar.jpg，而不是 http://localhost/avatar.jpg。
- 用
./avatar.jpg或avatar.jpg：相对当前 URL，极易出错，尤其路由带路径时 - 用
/avatar.jpg（根相对路径）：从域名后第一级开始，稳定可靠 - 用
<base href="/">：可统一基准，但会影响所有相对链接，包括<a href="about">，要通盘检查
Flask/Django/SpringMVC 等框架里为什么总 404
这些框架默认不自动托管任意目录下的文件；静态资源必须显式声明“可服务”。你把 style.css 放在 HTML 同级目录，框架根本不会理它。
- Flask 要求静态文件放在
static/目录，并用url_for('static', filename='css/style.css')生成路径 - Django 必须配置
STATIC_URL和STATICFILES_DIRS，并在模板中用{% static 'css/style.css' %} - SpringMVC 若用
<url-pattern>/</url-pattern>拦截所有请求，会覆盖 Tomcat 默认的静态资源处理器，需额外配置ResourceHttpRequestHandler或放行/static/**
Nginx/Apache 配置常踩的坑
即使路径写对了，服务器没配好照样返回 404。重点不在“有没有文件”，而在“能不能被正确映射到”。
立即学习“前端免费学习笔记（深入）”；
-
DocumentRoot（Apache）或root（Nginx）必须指向包含index.html的真实目录，不是项目根目录 - 静态资源子目录如
/assets/，推荐用alias而非root，避免路径重复拼接：location /assets/ { alias /var/www/myapp/dist/assets/; } - 别对静态资源路径加
try_files $uri /index.html——这会让缺失的 JS/CSS 回退到 HTML，造成“软 404”，浏览器报错却返回 200
构建部署阶段的隐性陷阱
SPA 滚动更新时出现“部分 JS 404”，往往不是配置问题，而是构建产物与缓存策略没对齐。
- 确保 JS/CSS 文件名含
contenthash（如app.a1b2c3.js），禁止固定名（如vendor.js） -
index.html必须禁用强缓存：Cache-Control: no-cache，否则旧版 HTML 会持续请求已删除的老哈希资源 - CDN 或 Nginx 对
.js/.css设immutable+ 1年过期，但前提是文件名哈希真正唯一且不复用
最易被忽略的一点：浏览器 Network 面板里看到的 404 请求地址，就是它真实发出去的 URL——复制那个完整地址，直接在终端 curl -I 或文件管理器里按路径逐级检查是否存在、大小写是否一致、扩展名是否被系统隐藏（比如 logo.png.txt）。路径问题从来不是玄学，只是少看了那一眼请求地址栏。
