H5端页面不更新主因是浏览器对index.html强缓存,uni-app默认构建未破坏该链路;需通过服务端禁用缓存、构建注入版本标识或History模式URL重定向解决,且须排查localStorage、Service Worker及微信网页缓存。

直接结论:H5端页面不更新,90%不是CDN或Nginx问题,而是浏览器对HTML文档本身做了强缓存,且uni-app默认构建未破坏该缓存链路。
为什么location.reload()和重新访问URL都无效
现象是:发布新版本后,用户刷新页面,Network面板里index.html状态码为304 Not Modified,甚至直接显示from memory cache——说明浏览器根本没发请求。这不是JS或CSS缓存的问题,而是HTML入口文件被协议层缓存了。
根本原因在于:index.html通常由服务端返回Cache-Control: public, max-age=3600(或类似),而uni-app的vue.config.js默认配置只处理JS/CSS/IMG的hash命名,对index.html不做版本扰动。
- uni-app的
configureWebpack.output.filename改的是JS路径,不影响HTML内容或加载方式 -
html-webpack-plugin默认生成的index.html没有内联时间戳或版本号,浏览器认为它“稳定”,反复复用 - 移动端Safari、微信内置浏览器对HTML缓存更激进,哪怕加了
?t=123在URL末尾,也可能被忽略(尤其Hash模式下)
强制HTML不缓存的三类实操方案
必须从HTML文档加载源头入手,不能只靠JS跳转或清storage。
-
服务端响应头优先级最高:给
index.html返回Cache-Control: no-cache, no-store, must-revalidate+Expires: 0。注意:仅no-cache不够,某些安卓WebView会无视;must-revalidate才是关键 -
构建时注入唯一标识到HTML中:在
vue.config.js里用html-webpack-plugin的templateParameters传入时间戳,再在public/index.html里写<meta name="version" content="">——这本身不防缓存,但可配合后续JS逻辑做校验和重载 -
前端主动“欺骗”浏览器URL(仅限非Hash模式):如果项目用的是History模式,在
main.js入口加一段逻辑:if (location.pathname === '/' && !location.search.includes('v=')) { location.replace(location.origin + location.pathname + '?v=' + Date.now()); }注意:replace比assign更干净,避免多一条history记录;但Hash模式下此法失效,因#后内容不参与HTTP请求
uni-app H5端时间戳参数必须加在#前面
这是最容易踩的坑。很多开发者在Hash模式下写location.href = '#/order?t=' + Date.now(),以为能触发刷新——实际完全无效,因为#及之后的内容不会发给服务器,浏览器也不会视为新URL。
- 正确做法是把时间戳加在
#前面,例如:location.href = '/?t=' + Date.now() + '#/order' - 若用
uni.navigateTo跳转,它生成的URL也是Hash模式,无法携带查询参数影响HTML加载;此时必须在onLoad里检测并手动location.replace - 微信内置浏览器对URL参数极其敏感,带多余
?或&可能触发安全拦截,建议只用单个t参数,值用Date.now().toString(36)缩短长度
上线前必须检查的三个隐藏缓存点
即使HTML更新了,用户仍可能看到旧界面,往往是因为以下三处被忽略:
-
localStorage里存的AB测试分组、埋点ID、主题偏好等——uni.clearStorage()不清理这些,得手动localStorage.removeItem('ab_group')或localStorage.clear() - Service Worker已注册并缓存了
/路由——需在main.js开头加navigator.serviceWorker.getRegistrations().then(r => r.forEach(reg => reg.unregister()))(仅上线首版需要) - 微信浏览器DNS预解析或HTTP/2连接复用导致旧IP响应——无法前端解决,需后端配合在
index.html响应头加Clear-Site-Data: "cache"(Chrome支持,微信暂不支持,但可作为未来兼容准备)
最顽固的缓存不在代码里,而在用户手机上已经运行了37小时的微信进程里。上线后别只看自己电脑,真机调试时务必清空微信的“网页缓存”设置,否则所有方案都白搭。


















