H5需部署到HTTP服务器而非“发行”,首选静态托管如Vercel或GitHub Pages;微信内白屏多因HTTPS、域名备案或JS-SDK权限问题;多端开发须注意平台差异;CDN缓存需HTML不缓存、JS/CSS哈希命名。

H5源代码不是“发行”到某个平台,而是部署到能提供HTTP服务的服务器或托管环境,再通过URL访问。你真正要选的,是托管方式 + 域名分发路径,不是“发布平台”本身。
用静态托管服务(如Vercel、GitHub Pages)还是自建Nginx?
绝大多数H5项目是纯静态资源(index.html + js/ + css/ + assets/),不需要后端逻辑,所以首选静态托管——省运维、免备案、秒级生效。
-
Vercel:适合有构建步骤的项目(比如用Vue CLI、Vite打包),自动识别
vercel.json或build脚本,支持preview URL和custom domain;但免费版带Vercel品牌水印,且国内访问偶有延迟 -
GitHub Pages:零成本、绑定
xxx.github.io域名方便,但不支持HTTPS自定义二级域名(需CNAME+DNS配置),且构建后必须推送到gh-pages分支或docs/目录,容易误操作导致页面404 -
自建Nginx/Apache:适合已有服务器、需内网访问、或要加反向代理(比如对接微信JS-SDK的
config签名接口);但每次更新得手动scp或写CI脚本,新手易漏gzip on或try_files配置,导致路由刷新404
# Nginx关键配置防404(SPA场景)
location / {
try_files $uri $uri/ /index.html;
}
微信内打开白屏?检查是否被微信内置浏览器拦截了本地资源
H5在微信里跑,常遇到canvas不渲染、fetch失败、或直接白屏——大概率不是代码问题,而是微信对非HTTPS、非备案域名、或未校验的JS-SDK权限做了限制。
- 微信强制要求:所有调用
wx.config的H5页面,jsApiList中声明的接口,其域名必须在公众号后台「JS接口安全域名」中备案(注意:不是业务域名,是http://或https://开头的完整协议+域名) - 若用
localhost或127.0.0.1调试,微信会直接禁用所有JS-SDK能力,连console.log都可能被屏蔽 - 图片/字体等资源若引用了HTTP链接(哪怕只是
https://www.php.cn/link/ccf2c17d9d1388d86d3bdb68bc85a49b),微信iOS客户端会静默拦截,表现为图片空白、字体加载失败
要不要用uni-app/Taro打包成小程序?先看这3个硬条件
很多团队想“一套代码多端跑”,结果H5上线顺利,小程序却卡在支付回调、分享路径、或web-view白屏——不是框架不行,是没对齐平台边界。
立即学习“前端免费学习笔记(深入)”;
- 如果H5里用了
localStorage存用户token,小程序里得换成uni.setStorageSync,且不能直接读取H5同域数据(沙箱隔离) - 如果H5依赖
document.querySelector操作DOM,Taro编译后可能因虚拟DOM机制失效,尤其配合iframe或第三方地图SDK时 -
微信小程序要求所有网络请求域名必须提前配置在
request合法域名列表,而H5无此限制;若你H5里写了fetch('https://www.php.cn/link/8862fafcae4e60912acd6e74d41b5858'),小程序端必须去后台填这个域名,否则报错request:fail url not in domain list
CDN加速和缓存策略怎么设才不翻车?
H5性能敏感,但乱配CDN反而导致用户看到旧版本——尤其是活动页、投票页这类需要强一致性的场景。
- HTML文件建议关闭CDN缓存(
Cache-Control: no-cache),或用时间戳参数控制:index.html?v=20251230 - JS/CSS文件可设长期缓存(
Cache-Control: public, max-age=31536000),但必须带内容哈希命名,比如app.a1b2c3.js,否则更新后用户仍加载旧缓存 - 注意:微信内置浏览器对
Service Worker支持极差,别在H5里强行上PWA离线方案,否则iOS微信下白屏率飙升
最常被忽略的一点:H5页面如果嵌在微信web-view里,它的Referer会被清空,所有依赖document.referrer做来源判断的逻辑(比如渠道统计、跳转回退)都会失效——得改用URL参数透传或localStorage标记。










