解決微信瀏覽器緩存站點入口文件(IIS部署Vue項目)

時間 2019-11-09

原文原文鏈接

最近開發的微信公衆號項目中(項目採用Vue + Vux 構建，站點部署在IIS8.5上)，遇到個很是奇葩的問題，發佈站點內容後，經過微信打開網址發現是空白頁面(後來驗證是微信瀏覽器緩存了入口文件-index.html,顧以前版本的index頁面找不到對應的js，由於咱們每次發佈會將以前的版本放至另外的備份目錄)，但關閉網頁再次去打開又是正常的。最初開發內部測試時該問題沒有引發關注，由於開發人員大部分都是android的手機，後來測試發現，某些android機型不是必現此問題，可是蘋果(IOS)機型，每次都是必然發生。javascript

百度千百回

在客戶反饋此問題後，如噩夢般的探索解決過程就此開始了。由於在開發機器上根本沒法測試，每次都必須打包發佈。而且，在問題發生後，團隊內部最初討論並不認爲是緩存了站點的入口文件(某些android機型不會發生此現象)，而是緩存了其餘js文件，因此一開始的解決方向就是錯誤的，致使浪費了不少時間。css

1. Vue項目打包發佈時，文件加上版本號

其實在用vue-cli 3.0腳手架構建的Vue項目，打包過程當中輸出的靜態文件名已經作了hash處理， webpack.prod.conf.js 中配置以下:html

output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  },

但咱們仍是嘗試在此處加上時間戳，如:vue

'js/[id].[chunkhash]'+ new Date().getTime() +'.js'

結果是此方案沒有生效，失敗次數1。java

2. 嘗試將Vue-Router 的history模式改成hash模式

這種思路，仍是延續了前一種方案的錯誤思路，認爲是瀏覽器緩存了某些js文件，因爲js文件找不到報錯，致使頁面空白。想要經過路由的hash模式 + 文件的版本號，來解決此問題。由於咱們的項目是採用的history模式(微信受權和站點部署在IIS某個子目錄下的緣由)。android

後來驗證這是徹底的錯誤思路，失敗次數2。webpack

3. 路由跳轉前攔截處理

嘗試此方案的時候，已經知曉產生該問題的緣由，是因爲微信瀏覽器緩存了入口文件(index.html),是想嘗試在訪問某個頁面時,先執行跳轉至加了版本號的index頁面。具體實現思路:nginx

router.beforeEach((to, from, next){
    // 實現某些跳轉邏輯
}

由於最終的嘗試失敗了，這裏就再也不撰述邏輯，失敗次數3。web

4. 給微信公衆號菜單連接加上特定版本號

該方案只能是用於臨時解決，內部作調測還能夠，但若是用於正式生產環境，會很是麻煩，須要每次發佈更新後，都去更改微信公衆號的菜單連接。以下引用所示，在連接上加版本號:vue-router

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。