解决微信更新h5页面有缓存导致不生效问题

1.0 问题描述

开发微信或者企业微信时，更新h5页面后去刷新微信，发现页面依旧是旧页面。虽然项目使用的是webpack打包，静态资源文件名加入了md5值，但依旧不能解决缓存问题。

其实微信缓存的是index.html文件,这就导致我们给静态资源追加md5值是没有用的。

2.0 前端解决方案

中间尝试过多种前端解决方案，尝试禁用浏览器的缓存问题，效果都不理想。

2.1 添加header头信息

<meta http-equiv="Cache-control" content="no-cache" />

这种方法没什么用。

2.2 系统设置应用清除微信缓存

这个方法虽然好用，相当于把微信的本地用户数据全部删除了，用户需要重新登录，体验很不好。

2.3 访问页面在url后追加时间戳

如

http:xxx.com/index.html?t=23452345234

经过测试，没什么用。

2.4 通过微信内部的工具

访问http://debugx5.qq.com/,手动清除缓存，虽然有用，但体验很不好。

3.0 服务器响应头禁用缓存

如果你的服务用nginx代理，那么在nginx的响应头中添加禁用缓存参数

location ~ .*.(?:htm|html)$ {
    # 由于服务器部署多套项目环境，所以配置具体的项目目录。
    root    jimei-admin
    # 缓存设置 -1为永不缓存
    expires      -1;
    # 添加返回头字段，设置HTTP请求头
    add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
}

亲测有效，对用户无感，解决html文件的缓存，再加上webpack打包追加md5值，非常完美解决。