必须通过HTTP/HTTPS协议访问才能正常运行，因file://协议会禁用跨源请求并限制API权限；需确保路径为相对路径、入口文件名正确、API地址适配线上环境；推荐GitHub Pages零配置部署。
本地 HTML5 文件直接丢到服务器就行？别急，先看这三件事
不是所有 HTML5 网页扔进 FTP 就能跑。常见问题：图片不显示、fetch() 报 CORS error、localStorage 读写失败、Canvas 动画卡顿——这些几乎都源于「没走 HTTP 协议」。本地双击打开 index.html 是用 file:// 协议，现代浏览器会禁用跨源请求、限制部分 API 权限。真正发布，必须让文件通过 http:// 或 https:// 访问。
批量发布多文件 HTML5 网页的实操路径
核心思路：把整个项目目录（含 index.html、js/、assets/、data.json 等）当做一个静态站点部署，而非单个文件上传。
- 确认入口文件名是
index.html（或服务器支持的默认首页，如default.html；否则需手动指定 URL 路径） - 检查所有资源路径是否为相对路径：
./images/logo.png✅，file:///C:/xxx/logo.png❌，C:\assets\sound.mp3❌ - 避免硬编码本地路径或开发时用的端口（如
http://localhost:8080/api），API 地址应改为相对路径/api/data或完整线上地址https://api.yoursite.com/data - 如果用了
service worker，确保scope和注册路径匹配，且sw.js在根目录或显式声明路径
零配置快速上线：GitHub Pages + 多子页面结构
适合教学演示、作品集、小型交互应用。不用买服务器，不配域名也能用 username.github.io/repo-name 访问。
- 每个 HTML5 子项目单独建一个仓库（如
game-pong、chart-demo），或统一放在主仓库的子目录（如/demos/physics-sim/） - 启用 GitHub Pages：Settings → Pages → Source 选
mainbranch +/ (root)（若放子目录则选/docs或自定义路径） - 注意：GitHub Pages 默认不执行
file://类行为，但也不支持 PHP/Node 后端；所有逻辑必须前端完成 - 子页面跳转示例：
物理模拟，路径以/开头才不会变成/demos/demos/physics-sim/
本地测试阶段就该验证的发布敏感点
很多“上线后才崩”的问题，其实 live-server 或 python3 -m http.server 就能提前暴露。
立即学习“前端免费学习笔记（深入）”；
- 运行
python3 -m http.server 8000（Python 自带），然后访问http://localhost:8000—— 这才是真实发布环境的最小模拟 - 检查浏览器控制台（F12 → Console）有没有
404（路径错）、MIME type错误（比如.glb文件被当成text/plain）、Blocked loading mixed active content（HTTP 资源混在 HTTPS 页面里） - 移动端真机访问测试：用手机连同一局域网，访问
http://192.168.x.x:8000，验证触摸事件、viewport设置、字体加载是否正常 - 如果用了 WebAssembly 或大量
ArrayBuffer操作，注意某些共享主机不支持application/wasmMIME 类型，需联系服务商添加
批量发布不是复制粘贴的体力活，关键是路径、协议、权限这三关。哪怕只改一个 ./ 为 /，也可能让整个交互流程失效。每次发布前，在本地起个 HTTP 服务跑一遍，比上线后抓耳挠腮强十倍。
