404错误主因是相对路径拼写错误，应优先查看network面板中失败请求的request url以准确定位问题。
404 错误十有八九是相对路径拼错了——不是代码写得不对，而是浏览器按当前 URL 路径拼出来的地址根本不存在。直接看 Network 面板里报错的完整请求路径，比猜逻辑快得多。
看 Network 面板里 404 请求的真实 URL
这是最硬核、最不可跳过的一步。打开浏览器开发者工具 → Network 标签页 → 刷新页面 → 找到状态码为 404 的请求（通常是 script、img、iframe 或跳转后的 HTML）→ 点开它 → 看 Headers 里的 Request URL。
- 如果显示的是
http://localhost/admin/user/profile，但你本意是跳去根路径下的/user/profile，说明用了location.href = "user/profile"这类相对跳转 - 如果显示的是
http://localhost/index/asset/main.js，而文件实际在/asset/main.js，说明<script src="asset/main.js"></script>缺了开头的/ - 如果显示的是
http://localhost/static-files/reports/index.html，但你写的是<iframe src="../reports/index.html"></iframe>，说明服务器（如 Jenkins/Jetty）根本不按文件系统结构解析..
验证当前页面 URL 对相对路径的影响
相对路径永远以当前页面的完整 URL 为基准，不是以文件位置、也不是以项目根目录。比如当前地址是 http://localhost/app/v2/dashboard，那么：
-
src="js/app.js"→ 解析为http://localhost/app/v2/js/app.js -
src="../css/theme.css"→ 解析为http://localhost/app/css/theme.css -
href="settings"→ 解析为http://localhost/app/v2/settings -
location.href = "log"→ 浏览器会发 GET 请求到http://localhost/app/v2/log
别心算，直接复制当前地址栏 URL，手动拼一遍，再和 Network 里看到的 Request URL 对一下——差一个斜杠或少一层 .. 都会 404。
用 new URL() 安全构造动态路径
硬写字符串拼接容易漏斜杠、错层级，尤其在路由嵌套深或路径带参数时。new URL() 是浏览器原生 API，能自动处理协议、主机、路径拼接规则：
const target = new URL("user/profile", window.location).href;
// 当前页是 http://localhost/admin/ → 结果是 http://localhost/user/profile
// 当前页是 http://localhost/app/v2/ → 结果是 http://localhost/app/user/profile
// ✅ 比 location.href = "/user/profile" 更灵活，又比 "user/profile" 更可靠
- 只对前端跳转或资源加载有意义；后端接口仍建议用绝对路径或配置 baseURL
- 不兼容 IE，但现代项目基本不用管
- 注意：如果当前页是
file:///协议，new URL()会抛错，需加兜底
Django/Flask 等后端框架中别信模板里的“相对路径”
在 Django 模板里写 <img src="images/logo.png">，看起来像相对路径，其实完全无效——Django 开发服务器不会把模板所在目录当作静态资源根。它只认 STATIC_URL 和 STATICFILES_DIRS 配置的路径。
- ❌ 不要放图片到
templates/目录下，也不要用./、../去“找” - ✅ 把图片放进
static/images/logo.png，然后用{% static 'images/logo.png' %} - ⚠️ 如果部署后还是 404，检查浏览器 Network 里请求的 URL 是不是
/static/images/logo.png，再确认该路径下文件是否存在（注意 Linux 大小写敏感、特殊字符编码问题）
真正容易被忽略的点是：很多开发者以为“路径写对了就行”，但没意识到不同环境（file:// vs http://）、不同服务器（Nginx vs Jetty vs Django runserver）、甚至不同标签（<img> vs <iframe></iframe>）对相对路径的解析规则根本不一样。不看 Request URL，光改代码只是碰运气。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
