h5、微信浏览器、微信公众号清理缓存的常用方法

梦里梦外; 2021-09-03 09:15 1242阅读 0赞

h5浏览器特别是微信公众号存在缓存的问题，让我们在测试、产品、用户面前彻底丢了面子，他们会问。为什么会有缓存？别人的产品可以做到，为什么我们的不可以？

下面提供几种方案可以尝试处理h5浏览器缓存的问题。

一、普通h5浏览器清理缓存方式。

1、在index.html文件中加入清理缓存的meta标签（有些浏览器有用，有些浏览器然并卵）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70][]

2、在vue.config.js webpack 打包文件使用hash+时间戳的形式，这样每次打包都是新的文件，Version可以理解为版本号，或者自己设置一个不会重复的变量。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 1][]

const  Version = new Date().getTime();
    module.exports = {
      publicPath: './',
      productionSourceMap: true,
      chainWebpack: config => {
        config.output.filename('[name].[hash].'+Version+'.js').end();
      }
    }

打包出来之后的形式是这样的，每次打包，每次的文件都是最新的。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 2][]

3、运维相关操作

①把要部署的前端项目先删除掉，在覆盖新的文件进去，这样就保证了不会存在旧的项目文件没有被覆盖的情况。

我这里用的是jenkis构建部署的前端项目，可以让运维同事操作。

![20201223103223994.png][]

②针对某个项目，设置nginx不设置缓存的配置（这只是例子，具体配置按自己项目来）

location /html/ {
    
       root D:/tools/nginx-1.16.0;
    
        autoindex on;
    
        add_header Cache-Control "no-store";
    
        expires -1;
    
     }

二、微信浏览器、公众号清理缓存方式

微信浏览器的缓存比较难以清理，这是微信一直存在的问题。可以看下官方的回复，骂声一片。

[https://developers.weixin.qq.com/community/develop/doc/00040e04ac41b887b80978f7c5b800?page=1\#comment-list][https_developers.weixin.qq.com_community_develop_doc_00040e04ac41b887b80978f7c5b800_page_1_comment-list]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 3][]

如果以上清理缓存的方式都不起作用，那没办法。只能说我们技术有限，被产品和老板骂也没得办法，让用户操作一下吧。

1、安卓手机清理缓存方式

①打开微信对话框，给任一会话发送 debugx5.qq.com，可以发给文件传输助手，发给女神以为你要跟她表白呢....

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 4][]

②点击打开上述连接，进入调试页面，勾选所有缓存选项，点清除。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 5][]

2、ios清理缓存的方式

点击屏幕上的三个 ...，多按几下刷新。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 6][]

3、如果以上的方式还不行，尝试

①取关公众号，重新关注；  
②退出微信账号登陆，重新登陆微信；  
③微信设置-通用-存储-清理缓存；

如果还不行，删库跑路吧。。。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70]: /images/20210813/fb6c2ee1148e46d7a4f452a18a3083dd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 1]: /images/20210813/9b187be953fc47d898e446d9bcf7242b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 2]: /images/20210813/b0f71121a38b46439ce7783e68f41a62.png
[20201223103223994.png]: /images/20210813/2eba2f5fc5974deaa76f6d9c403d6a7a.png
[https_developers.weixin.qq.com_community_develop_doc_00040e04ac41b887b80978f7c5b800_page_1_comment-list]: https://developers.weixin.qq.com/community/develop/doc/00040e04ac41b887b80978f7c5b800?page=1#comment-list
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 3]: /images/20210813/96907e2c3cec4efe8121e61594126d25.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 4]: /images/20210813/c52fd4b3891a483da337735f0dffd3c4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 5]: /images/20210813/2fd15007cd28421c896fc1396e5de49e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 6]: /images/20210813/0a630287771b4f4ebc417ca5cc7e9bc1.png