前言：博客或者論壇上面，還有自習親身經歷，發現微信小程序的webview組件的頁面緩存問題相當嚴重，對開發H5的小童鞋來說應該困擾了不少。很多小童鞋硬是抓破腦袋也沒有辦法解決這個問題，那我們今天就來探討下這個問題。
使用實例：
<web-view src="https://www.baidu.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>
這樣問題就可以輕松解決了。