HTML5网页发布前必须确认资源路径为相对路径或CDN域名、禁用开发代理确保真实接口调用、构建压缩静态文件并移除调试代码。
HTML5网页发布前必须确认的三件事
直接扔到服务器根目录就叫“发布”？多数人卡在这一步：没检查资源路径、没处理跨域、没压缩静态文件。HTML5页面本质是纯前端资源集合，index.html 里所有 src 和 href 路径必须是相对路径或 CDN 域名，否则本地能跑，线上 404。常见错误是用绝对路径写成 /js/app.js，部署到子路径（如 https://cdn.example.com/game/）时直接失效。
- 把所有资源路径改为相对于
index.html的路径，例如./css/style.css或../assets/img/logo.png - 禁用开发时的本地服务代理（如 vite 的
server.proxy），确保所有接口调用走真实域名或 CORS 允许的后端 - 用
npm run build（Vite/React/Vue）或手动压缩 HTML/CSS/JS，删掉console.log、source map 和未引用的 CSS 类
CDN 加速发布的实操配置要点
CDN 不是“上传即加速”，关键在缓存策略和 MIME 类型。国内主流 CDN（阿里云、腾讯云、Cloudflare）对 .html 默认缓存 10 分钟，但你改了 index.html，用户可能还在看旧版本——因为 HTML 文件本身被缓存了。解决方案是分离控制逻辑：让 HTML 文件不缓存，而 JS/CSS/图片加哈希后长期缓存。
- 构建时启用文件名哈希，如 Vite 的
build.rollupOptions.output.entryFileNames: 'assets/[name].[hash].js' - 在 CDN 后台将
*.html缓存时间设为0或no-cache，其他静态资源（*.js,*.css,*.png）设为 1 年 - 确保 CDN 返回的响应头含
Content-Type：HTML 必须是text/html; charset=utf-8，否则浏览器可能下载而不是渲染
上传到 CDN 的三种可行方式
别再用 FTP 手动拖文件——易漏、无回滚、不幂等。优先选 CLI 工具或 CI 集成。
- 用
@alicloud/pop-core+ossutil（阿里云 OSS+CDN）：先ossutil cp ./dist oss://my-bucket/ --update，再调用 API 刷新 CDN 缓存RefreshObjectCaches - 用
aws s3 sync ./dist s3://my-bucket/ --delete（AWS S3+CloudFront），配合aws cloudfront create-invalidation清除 HTML 缓存 - GitHub Pages + Cloudflare：把
dist推到gh-pages分支，Cloudflare 设置 CNAME 指向username.github.io，开启 “Proxy status” 即自动 CDN 加速
上线后必须验证的三个终端表现
很多人以为 F12 看 Network 面板没红字就完事了。实际真问题常藏在细节里：iOS Safari 的 viewport 缩放异常、微信内置浏览器拦截 fetch 请求、低配安卓机加载大 PNG 卡死。
立即学习“前端免费学习笔记（深入）”；
- 打开 Chrome DevTools → Network → Disable cache，硬刷新，确认所有资源状态码是
200或304，没有404或blocked:mixed-content - 用 iOS 真机访问，检查
meta name="viewport"是否含user-scalable=no（微信会强制忽略，但 Safari 会生效） - 在
chrome://flags中启用 “Slow 3G” 和 “CPU throttling 4x slowdown”，观察首屏是否白屏超 3 秒；若白屏，大概率是 JS 未分包或图片未懒加载
最常被跳过的环节是缓存清理验证：改完 HTML 后，必须用隐身窗口或 curl -I https://your-cdn.com/index.html 查看 Cache-Control 响应头，确认不是 max-age=600 这种陷阱值。
