前言：部落格或者論壇上面，還有自習親身經歷，發現微信小程式的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>

這樣問題就可以輕鬆解決了。