前言
項目是通過web-view内嵌在小程式裡的vue單頁應用.然而前幾天發現明明釋出了代碼，在小程式入口進去看到的還是舊頁面，嘗試了各種操作：
- 手動退出小程式，再次進入；
- 删除 發現-小程式，重新進入；
- 關閉微信，殺掉程序，重新進入
- 修改 Nginx 關于 Cache-Control 的配置；
- 用 debugx5.qq.com 手動清除安卓微信浏覽器緩存；
-
iOS 利用微信自帶清除緩存功能。
不管怎麼操作，依然顯示的是舊頁面！！！
徹底解決小程式内嵌web-view緩存問題
分析原因
這個緩存是存在哪裡的呢？
一般情況下，浏覽器緩存是個非常有用的特性，它能夠提升性能、減少延遲，還可以減少帶寬、降低網絡負荷。
浏覽器的緩存機制可以總結成下面兩句：
❝
1.浏覽器每次發起請求，都會先在浏覽器緩存中查找該請求的結果以及緩存辨別
2.浏覽器每次拿到傳回的請求結果都會将該結果和緩存辨別存入浏覽器緩存中。
❞
而web-view元件就是嵌在小程式裡的網頁，它本質上是運作在微信内置浏覽器裡的，它在緩存上并沒有完全遵照上述的規則，也即它的緩存并不能及時得到清理
；
在小程式裡面， web-view元件是通過一個url位址來通路h5頁面的，如果内嵌 H5 的位址不發生變化，那麼 web-view 通路資源會從緩存裡取，而緩存裡并沒有最新的資料，這就導緻了服務端的最新資源根本無法到達浏覽器，這也就解釋了為什麼修改 Nginx 的 Cache-Control 配置也無法生效的原因。是以，要想徹底解決及時重新整理，必須讓 web-view 去通路新的位址。
小結
❝
造成web-view無法重新整理的原因：
1.浏覽器緩存；
2.url位址被緩存
❞
解決方案
原因找到了，那麼如何解決呢？
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']
}
},
❝
關于hash配置， 可以參考這篇文章：vue 開發常用工具及配置五：hash 與緩存控制
❞
4.使用工具debugtbs
如果是安卓機， 可以在微信上打開http://debugtbs.qq.com， 然後将所有清除的按鈕點選一遍，下次再進去就可以了。
至此， 如果還是不能清除，其實也不用太擔心，web-view再過一段時間（時間不定，一天或者幾小時，無明顯規律）是可以進行緩存重新整理的，隻是不能做到實時重新整理， 有一說法是官方背景需要稽核頁面，具體不得而知了，感興趣的小夥伴可以查檢視，然後回來告訴我，靜待佳音。
推薦一個小工具
web-view如何調試？
- 開發工具上在web-view頁面内點選滑鼠右鍵有個調試的選項
- 需要在真機上調試需要自行引入vconsole