vue.js 微信浏览器缓存入口页面index.html问题

最新推荐文章于 2025-07-13 14:57:19 发布

人称帅哥

最新推荐文章于 2025-07-13 14:57:19 发布

阅读量9.3k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： vue.js微信缓存

本文链接：https://blog.youkuaiyun.com/zs343961443/article/details/87258217

前端专栏收录该内容

1 篇文章

订阅专栏

本文探讨了微信浏览器中前端更新时遇到的顽固缓存问题，深入分析其成因，并提供两种解决方案：一是变更访问链接，适用于测试环境；二是调整nginx配置，设置特定目录下的资源不被缓存，适用于生产环境。

问题场景：

1.线上部署nginx直接指向前端文件路径，nginx核心配置如下：

location /front/ {
          try_files $uri $uri/ /front/index.html;
          root /root/html/front;
}

2.前端每次发布新版时，通过微信浏览器访问原来链接 www.front.com/front/ 总是旧版代码，缓存时间很久。对发版造成严重影响

分析原因：

因为微信浏览器缓存了www.front.com/front/ 目录下的index.html，css文件，js文件，非常顽固。

解决方案：

1.改变访问链接www.front.com/front/?v=1123，这种方案线上环境基本不可行，只能在测试环境使用，因为用户端访问链接大部分情况都很难控制，不能通知所有用户去访问新链接

2.修改nginx配置，设置www.front.com/front/ 不缓存，nginx配置如下

location /front/ {
          try_files $uri $uri/ /front/index.html;
          root /root/html/front;
          #kill 缓存
          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;
}