vue的hash模式下小程序内置组件web-view的缓存问题

vue的hash模式下小程序内置组件web-view的缓存问题

前言：博客或者论坛上面，还有自习亲身经历，发现微信小程序的webview组件的页面缓存问题相当严重，对开发H5的小童鞋来说应该困扰了不少。很多小童鞋硬是抓破脑袋也没有办法解决这个问题，那我们今天就来探讨下这个问题。

使用实例：

<web-view src="https://www.xxx.com"></web-view>

上面实例就是微信小程序简单的web-view使用展示。

很多童鞋应该都会遇到这样一个问题，为什么我的h5页面已经更新到线上了，但是在微信小程序的web-view里面却展示的是上一个h5版本的内容，有些甚至会出现白屏的情况。

这个主要是基于我们现在前端大环境下，很多都是使用vue或者其他的单页面框架。就拿vue来说，vue默认打包下的路由的模式是hash模式，也就是url默认就带着#号的。所以很可能就会出现这样的情况是这样的

<web-view src="https://www.xxx.com/#/"></web-view>

这时候会有很多手机就会出现当h5的代码更新了v1.1的代码，但是他们的微信小程序的web-view里面展示的还是v1.0的，会很难受，然后就各种贴吧，论坛发文章寻求帮助。但是很多人都会回复说配置url版本号或者再url后面拼接时间戳标识，还有更离谱的会出现建议每次更新h5代码的时间修改项目的文件夹名称，想想是不是有点离谱了。但是按照他们的做法然后拼接版本号或者时间戳啥的，有些网友会回复缓存问题可以解决了啊，但是也有很多人会回复没有用啊。这时候开始疯狂抓狂了。

<web-view src="https://www.xxx.com/#/?v=1.1"></web-view>
<web-view src="https://www.xxx.com/#/a?v=1.1"></web-view>
<web-view src="https://www.xxx.com/#/a/b?v=1.1"></web-view>
<web-view src="https://www.xxx.com/#/a/b?a=b&v=1.1"></web-view>

有可能你们的路径会是上面这样子的了。版本号我也加了啊，为什么没有效呢？正常来说我们比如更新css文件或者js文件在url后面拼接上版本号去区分就可以解决的啊，为什么在这里会不生效啊。

答案：

因为vue的router默认的模式是"hash"，就是带#号的这种模式的，但是我们也可以删除#号的，在vue里面配置mode：“history”,也就是h5的histor模式，但是会有些童鞋会出现打包后出现白页面或者文件加载地址不对的问题，会出现各种坑，但是这些坑可能你都可以在论坛或者贴吧找到对应解决的办法的。普片都会说是需要配合nginx等服务器配置的。在这里我可以告诉你，其实可以不修改服务器配置去解决这个问题，vue本身打包的时候就可以解决这个问题的。这个问题在后面的文章里面我会仔细讲解，在这里我就先埋个伏笔好了，就不做过多的详细解释了。在这里我可以告诉你们，很多时候还是需要自己去尝试，自己在本地搭建一台nginx服务器去测试，项目的各种文件嵌套关系，对于打包有没有什么影响。

上面的web-view后面加的版本号是对于web-view的浏览器来说是他并不会重新加载页面的，就算变更了hash后面的版本号，他也只会增加一条历史记录，并不会重新加载页面，所以说，坑就坑在这个位置了，所以这时候我们只要把#号删除就可以解决为啥有些人加了版本号就会出现缓存，有些人不会出现这个问题了。

最后修改完的地址应该就是这样的

<web-view src="https://www.xxx.com?v=1.1"></web-view>
<web-view src="https://www.xxx.com/a?v=1.1"></web-view>
<web-view src="https://www.xxx.com/a/b?v=1.1"></web-view>
<web-view src="https://www.xxx.com/a/b?a=b&v=1.1"></web-view>

这样问题就可以轻松解决了。

其他的参考解决方案

1. 针对url地址没刷新的问题，可以在webview组件的src里面添加一个时间戳.

src = `https://XXX.com?timestamp=${new Date().getTime()}`
<web-view src='{{src}}'></web-view>

url后面加时间戳这个，苹果机是可以实时解决缓存的，然而安卓机不行

2. 在index.html的head头部添加不缓存的配置

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

3. 在webpack打包的时候加上 hash配置

filenameHashing: true,
  pages: {
    index: {
    // page 的入口
    entry: 'src/main.js',
    // 模板来源
    template: 'public/index.html',
    // 在 dist/index.html 的输出
    filename: 'index.html',
    // 当使用 title 选项时，
    // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
    title: 'Index Page',
    hash: true,
    // 在这个页面中包含的块，默认情况下会包含
    // 提取出来的通用 chunk 和 vendor chunk。
    chunks: ['chunk-vendors', 'chunk-common', 'index']
    }
  },

参考 博客园《微信小程序内置组件web-view的缓存问题探讨》
CSDN《彻底解决小程序内嵌web-view缓存问题》