双击打开HTML报404并非文件丢失，而是file://协议下浏览器禁用iframe/fetch等操作且路径解析异常；应改用HTTP服务器（如python3 -m http.server）并核对Network面板中实际请求URL。
404 错误在本地运行 HTML 时几乎从不表示“文件真丢了”，而是浏览器或服务器根本没在找对地方——关键得先分清你用的是 file:// 协议双击打开，还是通过本地 HTTP 服务（如 python3 -m http.server）访问。
为什么双击打开 HTML 会报 404？
浏览器用 file:// 协议加载时，iframe、fetch()、import 等操作默认被禁用或静默失败，控制台可能只显示“Failed to load resource”或空 iframe，但错误码却标成 404。这不是路径错，是安全策略直接拦掉请求。
- 相对路径如
src="../pages/report.html"在file://下解析行为不一致：Windows 常失败，Linux/macOS 可能侥幸成功 -
img、script、link标签里的相对路径同样失效，尤其嵌套子目录时 - 浏览器地址栏显示
file:///D:/project/overview.html，但 Network 面板里看到的请求却是file:///pages/report.html（缺了盘符和父路径）
PyCharm / WebStorm 运行 HTML 报 404 的真实原因
IDE 内置的“Open in Browser”功能实际会起一个轻量 HTTP 服务，但它的根目录默认不是你想象的位置——比如 PyCharm 会把 venv 或 static 目录当 Web 根，导致你点开的 HTML 文件物理路径和服务器映射路径不匹配。
- 常见结构错误：
index.html放在venv/或src/下，而 IDE 只把项目根或web/目录设为服务根 - 文件夹名含特殊字符（如
my+project）会导致 URL 编码异常，服务端无法路由到该路径 - 缓存残留：PyCharm 有时读取旧的部署配置，重启并清除缓存（
File → Invalidate Caches and Restart）可解决
怎么快速验证并修复？
别猜，直接看 Network 面板里浏览器到底请求了什么 URL，再比对文件真实位置。
- 按
F12打开开发者工具 → 切到Network→ 刷新页面 → 找状态码为404的请求项 → 点开看Headers里的Request URL - 如果 URL 是
http://localhost:63342/project/sub/index.html，就去检查 PyCharm 的 Services 面板或右下角 Live Server 端口，确认它服务的根路径是否真包含sub/ - 统一改用绝对路径起点：
src="/assets/js/app.js"而不是src="assets/js/app.js"，前提是你的服务根目录设置正确 - 最稳方案：终端进项目根目录，执行
python3 -m http.server 8000，然后手动访问http://localhost:8000/index.html—— 此时路径完全由你控制
Tomcat / Jenkins 等服务器上 iframe 404 怎么办？
这类环境里，src 的相对路径不是按文件系统算，而是按当前 HTTP 请求的 URL 路径解析。比如访问 http://jenkins/job/myjob/overview.html，那么 src="../report/index.html" 实际请求的是 http://jenkins/report/index.html，而非文件系统中的上层目录。
- 优先用上下文无关的绝对路径：
src="/job/myjob/Session_20Data_20for_20Overview_20Report/index.html" - Jenkins 中若用内置静态文件服务（如
/static-files/），需确认文件是否真放在JENKINS_HOME/static-files/下，而不是工作区里 - 避免依赖
../：把所有被 iframe 加载的 HTML 放在同一级目录，用同级引用，减少路径歧义
真正容易被忽略的点是：404 错误本身不告诉你问题出在协议、IDE 配置、服务器路由还是浏览器安全策略——必须靠 Network 面板里那个具体的 Request URL 来定位，否则所有“改路径”“清缓存”“重启服务”的操作都只是碰运气。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
