VSCode运行html文件出现404错误的排查-VSCode-PHP中文网

404错误主因是live server配置与项目结构不匹配：需以文件夹方式打开项目、确保index.html命名或手动指定路径、检查端口占用及插件干扰，并注意路径基准为工作区根目录而非html所在目录。

vscode运行html文件出现404错误的排查

404 错误不是 VSCode 的错，它根本没在跑服务器——真正该查的是你用的启动方式（Live Server / 自定义脚本 / 浏览器直接打开）是否匹配文件路径、工作区结构和协议限制。

Live Server 启动后访问 `/` 报 404 或空白页

这说明 Live Server 没把你的 HTML 文件当入口，或者压根没识别到项目根目录。

必须通过 File → Open Folder 打开整个项目文件夹，不能双击单个 .html 文件启动
Live Server 默认只响应 index.html；如果主文件叫 app.html，浏览器地址栏要手动改成 http://127.0.0.1:5500/app.html
检查 VS Code 右下角状态栏：显示 Go Live (5500) 才算真启动了；没显示就只是右键失效，不是插件坏了
路径含中文、空格或特殊符号（如 我的项目/index.html）会导致部分版本 Live Server 解析失败，换成 my-project/index.html 再试

`src="js/app.js"` 或 `href="css/style.css"` 报 404

资源路径看起来没错，但浏览器请求的 URL 和磁盘上真实位置对不上——根源在于“相对路径基准”被搞混了。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

Live Server 以 **VS Code 工作区根目录** 为 /，不是 HTML 文件所在子目录。例如项目结构是 my-project/src/index.html，那 src="js/app.js" 实际请求的是 http://127.0.0.1:5500/js/app.js，而非 http://127.0.0.1:5500/src/js/app.js
想让路径按 HTML 文件位置算？改用相对路径：src="./js/app.js" 或 src="../js/app.js"（注意开头的 . 或 ..）
拖拽文件到 HTML 的 src 或 href 属性里，VS Code 会自动补全正确相对路径，比手写靠谱
别用 <base href="/>%EF%BC%8C%E5%AE%83%E4%BC%9A%E5%BC%BA%E8%A1%8C%E9%87%8D%E5%86%99%E6%89%80%E6%9C%89%E7%9B%B8%E5%AF%B9%E8%B7%AF%E5%BE%84%EF%BC%8CLive%20Server%20%E4%B8%8B%E6%9E%81%E6%98%93%E5%BC%95%E5%8F%91%E6%84%8F%E5%A4%96%20404

%E6%B5%8F%E8%A7%88%E5%99%A8%E6%8E%A7%E5%88%B6%E5%8F%B0%E6%98%BE%E7%A4%BA%20`net::ERR_ABORTED%20404`%20%E4%B8%94%20Initiator%20%E6%98%AF%20`content-script.js`

%E8%BF%99%E4%B8%8D%E6%98%AF%E6%9C%8D%E5%8A%A1%E7%AB%AF%E9%97%AE%E9%A2%98%EF%BC%8C%E6%98%AF%E6%9F%90%E4%B8%AA%E6%8F%92%E4%BB%B6%E5%8A%AB%E6%8C%81%E4%BA%86%E8%AF%B7%E6%B1%82%E2%80%94%E2%80%94%E5%B0%A4%E5%85%B6%E5%B8%B8%E8%A7%81%E4%BA%8E%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E5%B8%B8%E7%94%A8%E6%89%A9%E5%B1%95%E3%80%82

VS%20Code%20%E4%B8%AD%E7%A6%81%E7%94%A8%E8%BF%99%E4%BA%9B%E6%8F%92%E4%BB%B6%E5%B9%B6%E9%87%8D%E5%90%AF%E7%AA%97%E5%8F%A3%EF%BC%9AVetur%E3%80%81Auto%20Rename%20Tag%E3%80%81Prettier%E3%80%81ESLint
Chrome%20%E6%89%93%E5%BC%80%E9%9A%90%E8%BA%AB%E7%AA%97%E5%8F%A3%EF%BC%88%E6%97%A0%E4%BB%BB%E4%BD%95%E6%89%A9%E5%B1%95%EF%BC%89%EF%BC%8C%E8%AE%BF%E9%97%AE%E5%90%8C%E4%B8%80%E5%9C%B0%E5%9D%80%EF%BC%9B%E5%A6%82%E6%9E%9C%20404%20%E6%B6%88%E5%A4%B1%EF%BC%8C%E5%9F%BA%E6%9C%AC%E9%94%81%E5%AE%9A%E6%98%AF%E6%8F%92%E4%BB%B6%E5%B9%B2%E6%89%B0
%E6%89%93%E5%BC%80%20Network%20%E9%9D%A2%E6%9D%BF%EF%BC%8C%E7%82%B9%E5%BC%80%E4%B8%80%E4%B8%AA%20404%20%E8%AF%B7%E6%B1%82%EF%BC%8C%E7%9C%8B%20Initiator%20%E5%88%97%EF%BC%9A%E5%A6%82%E6%9E%9C%E6%98%AF%20tampermonkey%E3%80%81adguard%20%E6%88%96%E6%9F%90%E4%B8%AA%20.js%20%E6%96%87%E4%BB%B6%E5%90%8D%EF%BC%8C%E5%B0%B1%E6%98%AF%E5%AE%83%E5%B9%B2%E7%9A%84
%E6%9F%90%E4%BA%9B%E5%B9%BF%E5%91%8A%E5%B1%8F%E8%94%BD%E5%99%A8%E6%88%96%E2%80%9C%E5%89%8D%E7%AB%AF%E5%8A%A9%E6%89%8B%E2%80%9D%E7%B1%BB%E6%89%A9%E5%B1%95%E4%BC%9A%E9%87%8D%E5%86%99%20fetch%20%E6%88%96%E6%B3%A8%E5%85%A5%E8%84%9A%E6%9C%AC%EF%BC%8C%E5%AF%BC%E8%87%B4%E8%B5%84%E6%BA%90%E8%AF%B7%E6%B1%82%E5%8F%91%E5%88%B0%E9%94%99%E8%AF%AF%E8%B7%AF%E5%BE%84

%E7%BB%88%E7%AB%AF%E6%98%BE%E7%A4%BA%20%E2%80%9Cserver%20running%E2%80%9D%EF%BC%8C%E4%BD%86%E6%89%80%E6%9C%89%E8%AF%B7%E6%B1%82%E9%83%BD%20404

%E6%9C%8D%E5%8A%A1%E6%A0%B9%E6%9C%AC%E6%B2%A1%E8%B5%B7%E6%9D%A5%EF%BC%8C%E5%8F%AA%E6%98%AF%E6%97%A5%E5%BF%97%E9%AA%97%E4%BA%86%E4%BD%A0%E2%80%94%E2%80%94%E7%AB%AF%E5%8F%A3%E8%A2%AB%E5%8D%A0%E6%98%AF%E6%9C%80%E9%9A%90%E8%94%BD%E4%B9%9F%E6%9C%80%E9%AB%98%E9%A2%91%E7%9A%84%E5%85%83%E5%87%B6%E3%80%82

%E8%BF%90%E8%A1%8C%20netstat%20-ano%20%7C%20findstr%20">（把 <code>5500 换成你实际端口），如果有输出且末尾带数字（如 12345），说明端口正被占用
执行 taskkill /F /pid 12345 干掉它；Windows 下若提示命令不存在，先 cd c:\WINDOWS\system32\ 再执行
Live Server 被占端口时可能 fallback 到空服务，不报错但所有请求返回 404；Vite/Webpack 等工具也会静默降级，别信日志里的 “running”
Linux/macOS 用户注意大小写：logo.png ≠ Logo.PNG，本地开发可能不报错，但 Live Server 启动的 HTTP 服务严格区分大小写

真正卡住的 404，往往发生在“路径看似合理、服务看似运行、插件看似无关”的交叉地带。这时候别调代码，先做三件事：确认端口干净、确认工作区是文件夹而非单文件、关掉所有非必要插件——做完这三步，绝大多数 404 就消失了。