HTML5页面加载失败应优先查看浏览器控制台错误，常见如404、net::ERR_ABORTED、Failed to load module script等；需检查资源路径、ES模块语法、MIME类型及服务协议是否合规。
HTML5 页面加载失败时先看浏览器控制台报什么错误
绝大多数 HTML5 加载失败不是“白屏”或“卡住”这么模糊，而是有明确的 404、net::ERR_ABORTED、Failed to load module script 或 Cross-Origin Request Blocked 等错误。打开浏览器开发者工具（F12 → Console / Network 标签页），刷新页面，观察第一个红色错误信息——它通常就是根因。
常见现象包括：index.html 能打开但资源全 404；JS 模块加载报 TypeError: Failed to resolve module specifier；图片路径显示为 http://localhost:8000/img/logo.png 但实际文件在 /assets/logo.png。
- 检查
、都会请求
https://example.com/js/app.js（404），而非https://example.com/myapp/js/app.js。解决方法取决于构建工具：
立即学习“前端免费学习笔记（深入）”；
- Vite：在
vite.config.js中设置base: '/myapp/'（结尾带斜杠） - Vue CLI：修改
vue.config.js的publicPath: '/myapp/' - Create React App：构建前设环境变量
PUBLIC_URL=/myapp，再运行npm run build - 纯手写 HTML：把所有
src="/js/...改成相对路径src="js/...，或用最前面）
本地双击打开 HTML5 页面失败的绕过方案
双击
index.html启动的是file://协议，现代浏览器出于安全限制，会阻止以下行为：fetch('./data.json')、import('./module.js')、XMLHttpRequest加载本地 JSON、甚至部分。这不是代码 bug，是浏览器策略。临时验证可用以下任一方式：
- 用 Python 快速起一个本地服务器：
python3 -m http.server 8000
，然后访问http://localhost:8000 - 用 Node.js（需全局安装
serve）：npx serve -s dist
（假设产物在dist目录） - VS Code 安装插件 “Live Server”，右键 HTML 文件选择 “Open with Live Server”
- Chrome 启动时加参数禁用安全限制（仅调试，不推荐长期使用）：
chrome.exe --user-data-dir="C:/temp" --unsafely-treat-insecure-origin-as-secure="file:///" --user-data-dir="C:/temp2" --allow-file-access-from-files
ES Module 加载失败的三个硬性条件
哪怕路径都对，
仍可能静默失败。它要求三者同时满足：- 脚本标签必须显式声明
type="module"，否则浏览器当普通脚本处理（不识别import） - 被
import的模块路径必须是完整 URL 或以./、../、/开头（不能是utils.js这种裸名） - 服务端返回的 JS 文件必须带
Content-Type: text/javascript（或application/javascript）。Pythonhttp.server默认返回text/plain，会导致 Chrome 报Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/plain"
最后一项最容易被忽略：如果你用自建脚本或老旧 HTTP 服务，务必确认响应头正确。Vite / Webpack Dev Server 默认已处理，但 Python
http.server需要自己改或换用live-server。 - Vite：在
