解決微信瀏覽器快取站點入口檔案(IIS部署Vue專案)
最近開發的微信公眾號專案中(專案採用Vue + Vux 構建，站點部署在IIS8.5上)，遇到個非常奇葩的問題，釋出站點內容後，通過微信開啟網址發現是空白頁面(後來驗證是微信瀏覽器快取了入口檔案-index.html,顧之前版本的index頁面找不到對應的js，因為我們每次釋出會將之前的版本放至另外的備份目錄)，但關閉網頁再次去開啟又是正常的。最初開發內部測試時該問題沒有引起關注，因為開發人員大部分都是android的手機，後來測試發現，某些android機型不是必現此問題，但是蘋果(IOS)機型，每次都是必然發生。
百度千百回
在客戶反饋此問題後，如噩夢般的探索解決過程就此開始了。因為在開發機器上根本無法測試，每次都必須打包釋出。並且，在問題發生後，團隊內部最初討論並不認為是快取了站點的入口檔案(某些android機型不會發生此現象)，而是快取了其他js檔案，所以一開始的解決方向就是錯誤的，導致浪費了很多時間。
1. Vue專案打包釋出時，檔案加上版本號
其實在用vue-cli 3.0腳手架構建的Vue專案，打包過程中輸出的靜態檔名已經做了hash處理， webpack.prod.conf.js 中配置如下:
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},但我們還是嘗試在此處加上時間戳，如:
'js/[id].[chunkhash]'+ new Date().getTime() +'.js'結果是此方案沒有生效，失敗次數1。
2. 嘗試將Vue-Router 的history模式改為hash模式
這種思路，還是延續了前一種方案的錯誤思路，認為是瀏覽器快取了某些js檔案，由於js檔案找不到報錯，導致頁面空白。想要通過路由的hash模式 + 檔案的版本號，來解決此問題。因為我們的專案是採用的history模式(微信授權和站點部署在IIS某個子目錄下的原因)。
後來驗證這是完全的錯誤思路，失敗次數2。
3. 路由跳轉前攔截處理
嘗試此方案的時候，已經知曉產生該問題的原因，是由於微信瀏覽器快取了入口檔案(index.html),是想嘗試在訪問某個頁面時,先執行跳轉至加了版本號的index頁面。具體實現思路:
router.beforeEach((to, from, next){
// 實現某些跳轉邏輯
}因為最終的嘗試失敗了，這裡就不再撰述邏輯，失敗次數3。
4. 給微信公眾號菜單鏈接加上特定版本號
該方案只能是用於臨時解決，內部做調測還可以，但如果用於正式生產環境，會非常麻煩，需要每次釋出更新後，都去更改微信公眾號的菜單鏈接。如下引用所示，在連結上加版本號:
http://yqwx.xx.com/index.html?vt=1234
因為這種方案，幾乎不可能用於生產環境，失敗次數4.
5. 嘗試將站點部署到nginx上
我們的專案是部署在IIS上的，但百度“微信瀏覽器快取入口檔案”問題，幾乎所有文章中提到的網站都是部署在nginx上,有些解決此問題的方案，都是設定nginx，如以下幾篇參考文中所例的設定:
location ~* ^.+\.(jpg|jpeg|gif|png|ico|css|js)$ {
root /mnt/dat1/test/tes-app;
#### kill cache
add_header Last-Modified $date_gmt;
add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
if_modified_since off;
expires off;
etag off;
}我們也嘗試了安裝nginx, 不過受專案其他因素影響，後來放棄了此方案，失敗次數5。
驀然回首，它在此處
雖然以上幾種解決方案的嘗試，都以失敗告終，但至少我們知曉了造成該問題的原因是由於微信瀏覽器快取了站點入口檔案(index.html)，並嘗試去從Web伺服器(IIS)的配置去解決(因為在nginx上可以設定某些快取，那麼在IIS上應該也是可以的)。
最終的解決方案非常簡單的，簡單到我們都懷疑人生，哈哈。
在IIS中配置, 如下圖所示:
解決該問題的過程是非常痛苦的，顧以此文記錄，以示我們踩過的坑。
參考
- 我想轉行之----微信瀏覽器快取
- 微信頁面入口檔案被快取解決方案
- IIS7.0及IIS8.0新增Vary頭和expires頭