转载:vue+webpack打包发布到线上后微信公众号H5部分打开白屏,刷新又好了

VUE·前端 · 03-04

客户有反馈,有些客户打开后白屏。有视频为证。
遂开始排查,在编辑器里搜索,反复试验均无果。
出现白屏后,刷新即可修复。
这次可能的原因
分析白屏原因,应该是用户访问的index.html并不是最新的, 而是微信缓存的旧版的index.html 但是本地的JS缓存过期了,加载旧版JS的时候404了。

微信客户端及微信浏览器下比较特殊,这个bug一样的存在居然把入口文件html给缓存下来了,这就意味着通过版本号和hash号的形式避免缓存的方案失效了。同时html的meta设置依旧没能生效。
标准的浏览器是不会缓存html文件的。

经常使用vue作为开发框架的开发者都知道,build打包后,所生成的css/js的文件名中间会夹杂哈希值,以此来避免缓存问题。但是由于入口文件index.html的名字每次打包后不改变,并且也不能乱变,就导致了index.html在用户端仍然会被缓存下来。那么在服务端更新包之后,由于旧的文件被删除,而index.html所链接的路径依然是旧文件路径,因此会找不到文件,从而白屏。

location / {
    root   /root/path;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
    #### kill cache
    add_header Last-Modified $date_gmt;
    add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
    if_modified_since off;
    expires off;
    etag off;
}

add_header Last-Modified $date_gmt;:添加一个Last-Modified头部,将其值设置为当前GMT时间,用于标识资源的最后修改时间。
add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';:设置Cache-Control头部,指示客户端不要缓存该资源,并且要求客户端每次请求都要向服务器验证缓存的有效性。
if_modified_since off;:禁用If-Modified-Since请求头部,防止浏览器发送此头部来验证资源是否修改。
expires off;:禁用Expires头部,避免浏览器根据过期时间来决定是否使用缓存。
etag off;:禁用ETag头部,也是为了防止浏览器使用缓存的机制之一。

vue+webpack打包发布到线上后微信公众号H5部分打开白屏,刷新又好了

Theme Jasmine by Kent Liao