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

客户有反馈，有些客户打开后白屏。有视频为证。
遂开始排查，在编辑器里搜索，反复试验均无果。
出现白屏后，刷新即可修复。
这次可能的原因
分析白屏原因，应该是用户访问的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部分打开白屏,刷新又好了