404错误本质是服务器明确响应“请求路径无对应资源”，关键在请求url是否被正确构造、送达与解析；需通过network面板查真实请求url、检查base标签、静态资源部署路径及服务器配置。
404 错误不是“文件丢了”，而是浏览器发出了请求，服务器明确回了“找不到”——所以重点不在本地有没有那个文件，而在“请求路径是否被正确构造、正确送达、正确解析”。
Network 面板里看清楚到底请求了什么 URL
这是最直接的突破口。打开开发者工具 → Network → 刷新页面 → 找到标红的 JS/CSS/图片请求 → 点开它，看 Request URL 和 Response 标签页。
- 如果 Request URL 里有空格、中文、
&、=但没被%编码（比如js/app.js?q=张三），说明前端拼接时漏了encodeURIComponent() - 如果 URL 明显不对（比如本该是
/static/css/main.css，却发了/css/main.css），可能是<base>设置错误，或路径写成了相对路径而非绝对路径 - 如果 Response 内容是 HTML（开头是
），说明服务器根本没找到资源，返回了兜底的 404 页面——这会触发 <code>Uncaught SyntaxError: Unexpected token ' 这类“假语法错误”
检查 <base href="..."> 是否与部署路径匹配
<base> 会强行改写所有相对路径的解析起点，但它不关心你当前在哪个路由下。开发时没问题，一部署到子目录就全崩，八成是它惹的祸。
- 确认
href值结尾带/，且和实际部署路径一致（如部署在https://example.com/my-app/，则<base href="/my-app/">） - Vue CLI 项目要同步改
vue.config.js里的publicPath；Vite 项目对应改vite.config.ts的base - 临时验证：在 Elements 面板右键点击一个
<link>，选“Copy link address”，粘贴出来看浏览器最终解析出的完整 URL 是不是你预期的
确认静态资源是否真的能被 Web 服务器访问到
很多 404 其实是“路径对了，但服务器压根不认这个位置”。尤其在 Django、Spring Boot、自建 Nginx 等场景下，静态资源必须显式声明为可服务路径。
- Django：图片必须放
static/目录，HTML 中用{% static 'images/logo.png' %}，不能直接写./images/logo.png - Spring Boot：默认只托管
static/、public/、resources/下的文件；若把 JS 放在templates/里，永远 404 - Nginx：检查
location /static/块是否指向正确的磁盘路径，且权限允许读取 - Tomcat：确保文件放在
webapps/yourapp/static/下，而非webapps/ROOT/或其他未部署的应用目录
别忽略 file:// 协议下的特殊限制
直接双击打开 HTML 文件（地址栏是 file:///...）时，浏览器会拦截含空格、中文、#、? 的资源路径，连请求都不发——Network 面板里都看不到记录，直接报 404。
- 这种情况只能换 Web 服务器跑：用
npx serve、python -m http.server或 VS Code Live Server 插件 - 避免在
src或href里硬编码含特殊字符的路径；命名静态资源优先用 ASCII 字符（如open_hours.jpg而非öppettider.jpg） - 如果必须支持
file://，所有路径需用encodeURI()处理（注意不是encodeURIComponent()），且不能含查询参数
真正卡住人的往往不是路径写错，而是你以为路径对了——比如 <base> 悄悄改写了所有相对路径，或者 Django 把你的图片当模板文件忽略了。排查时，先盯死 Network 里的真实请求 URL，再逆向推它从哪来，比盲目改路径高效得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
