本地服务器返回404的根本原因是请求路径与磁盘真实文件路径不匹配,因各工具(Live Server、python -m http.server、Vite等)均无自动后缀补全或路由fallback机制,需严格保证URL与文件系统路径一致。

直接打开本地 index.html 文件(file:/// 协议)不会触发 404,所以你看到的 404 一定来自某个本地服务器——比如 VS Code 的 Live Server、WebStorm 内置服务器、Vite 预览、或者你手动启的 python -m http.server。问题不是“怎么设置”,而是服务器没找到你请求的路径对应的真实文件。
Live Server 扩展启动后访问 /xxx 返回 404
VS Code 的 Live Server 默认以当前工作区根目录为 Web 根目录(DocumentRoot),但它**不自动映射子路由**。例如你访问 http://127.0.0.1:5500/about,它会去找磁盘上 ./about 这个文件或文件夹,而不是 ./about.html 或 ./about/index.html。
- 默认只支持直接请求真实存在的文件(
/index.html)、目录(/assets/)或带扩展名的路径 - 如果你希望
/about自动 fallback 到/about.html,需手动配置:右键项目根目录 → “Open with Live Server” → “Change Live Server Settings” → 添加:"liveServer.settings.CustomBrowserUrl": "http://127.0.0.1:5500"并配合重写规则(但 Live Server 原生不支持 rewrite) - 更可靠的做法:确保你访问的 URL 和磁盘路径严格一致,比如想打开
about.html,就访问http://127.0.0.1:5500/about.html,不要省略.html
python -m http.server 启动后提示 404
这个命令起的是最简静态服务器,完全无路由逻辑,纯靠文件系统路径一一对应。它不读 .htaccess,不支持 DirectoryIndex,也不做任何后缀补全。
- 它只会返回
index.html当且仅当你请求的是目录路径(如http://localhost:8000/)且该目录下存在名为index.html的文件 - 请求
/pages/contact?它会找./pages/contact这个文件——如果不存在,立刻 404;它不会尝试contact.html或contact/index.html - 常见翻车点:Windows 下文件被保存为
index.html.txt(隐藏扩展名),服务器找不到index.html就报 404;用命令dir /a确认真实文件名
Vite / Next.js / Remix 等开发服务器返回 404
这类工具虽然自带路由能力,但它们的“404”行为分两种:一种是开发服务器真找不到资源(如引用了不存在的 JS/CSS),另一种是前端路由匹配失败(如访问 /nonexistent)。前者是构建/路径配置问题,后者是应用层逻辑。
立即学习“前端免费学习笔记(深入)”;
- 检查终端是否有类似
[vite] Error loading /src/assets/logo.svg的报错——这是服务器在找静态资源时 404,说明src下路径写错了,或你用了绝对路径/logo.svg但没配public目录 - 若页面内容显示“Not Found”但 Network 面板里状态码是
200,那是前端路由渲染的假 404,不是服务器问题;真正的服务端 404 必须在 Network 中看到Status: 404 Not Found - Vite 默认把
public/下文件映射到根路径,但src/下资源必须用相对路径引用(如../public/logo.png不合法,应写/logo.png)
浏览器 Network 面板里看到 404 但路径看起来没错
别信肉眼判断。复制 Network 中那个失败请求的完整 URL,粘贴进新标签页单独访问——如果也 404,说明问题出在服务器;如果能打开,说明是页面内其他脚本或样式干扰了路径解析(比如 JS 拼接了错误字符串)。
- 重点看请求的
Request URL列:是不是多了/static/、/_next/、/api/这类前缀?那可能是框架自动加的,你要去查它的静态资源配置或 API 代理规则 - 点击该请求 → Headers → 查
Request URL和Referrer:如果 Referrer 是http://localhost:3000/dashboard,而请求 URL 是/js/app.js,那实际查找路径就是http://localhost:3000/js/app.js,不是相对于当前 HTML 文件的位置 - 路径中出现
%20(空格编码)或中文字符?多数本地服务器不处理 URL 解码后的路径映射,直接按字面量找文件,导致 404
真正卡住人的地方,往往不是“怎么配”,而是没意识到:每个开发服务器对路径的解释规则完全不同,且它们和你在文件管理器里看到的目录结构不是一回事。先确认你敲的 URL 最终被解析成哪个物理路径,再检查那个路径下有没有对应文件——跳过这步,所有配置都是空中楼阁。



















