转载: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部分打开白屏,刷新又好了

  1. Search Engine Index 12 天前

    Hello,

    for your website do be displayed in searches your domain needs to be indexed in the Google Search Index.

    To add your domain to Google Search Index now, please visit

    https://searchregistry.net/

  2. Leesa Blank 13 天前

    Hey Ccooddee,

    Are you dreaming of financial freedom? I’ve been in your shoes. But now, I’m waking up every day to $1,233 in passive income—effortlessly.

    How? It’s all thanks to AI Traffic Secrets —a powerful collection of AI tools and training that skyrocketed my business. These tools work seamlessly, automating my traffic, boosting engagement, and driving consistent income.

    =>> https://ai-traffic-secrets.blogspot.com/

    The best part? I use these tools every day. They’re designed to be simple and effective, so you can start generating results right away—no tech expertise required!

    If you’re ready to unleash the full potential of AI and make passive income while you sleep, check out AI Traffic Secrets today!

    =>> https://ai-traffic-secrets.blogspot.com/

    Cheers,
    [Leesa Blank]

Theme Jasmine by Kent Liao