企業微信清除緩存后首次進入應用頁面空白

問題：

企業微信清除緩存后首次點開應用（公司開發的項目，布在企業微信工作台里），頁面顯示空白。

刷新、關閉后再打開、在瀏覽器顯示都是正常的，清除緩存后首次點開應用十次有九次都顯示空白。

 

排查：

空白頁面應該顯示的是登錄頁面，在login.js、common.js、login.ejs等相關文件里alert調試，發現只有login.ejs里的alert彈出，其他文件的alert沒有彈出，說明點擊打開應用時沒有進到login.js和common.js，也就是沒有加載外部js文件。

用Charles代理調試，看接口顯示304，說明在發送請求后檢測到瀏覽器上有緩存，加載了緩存。

一開始是想着：手動添加兩個script標簽加載js文件。但是會報錯babel啥的只能是唯一，而且很難定位到那兩個304的文件src。

后來再試着：既然刷新一下就加載出來了，那在login.ejs用window.location.reload()刷新一下。然后又碰到了死循環，一直在刷新這個頁面。難點就是一直在想怎么避免死循環，最后想到了用sessionStorage判斷一下。

let tag = sessionStorage.getItem('reloadTag');
if (!tag) {
   window.location.reload();
   sessionStorage.setItem('reloadTag', true);
}

 

我以為已經改好了，結果還有：清除緩存后首次登錄后也顯示空白頁面。

那就在index.ejs里也刷新一下，但是報錯vue-router.esm.js: Error: “Loading chunk 0 failed“。

百度了很久，最后大概總結出：

報錯原因：頁面異步加載，訪問路由會卡住然后報錯。

解決方法：非懶加載路由。

const ReportCenter = r => require.ensure([], () => r(require('../page/reportCenter.vue')), "index");

改為：

import ReportCenter from '../page/reportCenter.vue'

問題解決。