最近上線的一個vue項目，需要各種路由跳轉，在開發和測試環境都沒問題，但是在生產環境，發現後期更新代碼的時候，有些機型（ios機型，暫未發現android有問題）跳轉路由的時候，標題修改了，但是內容並沒有顯示。抓包後，發現跳轉的時候，js文件報404。

在查閱資料後，找到了原因。因為怕影響首屏的加載速度，所以使用vue-router的懶加載機制，當用戶刷新頁面時，防止webpack打包後的js被緩存，會加一個哈希值，因此每次修改，會重新生成js文件名。但是用戶大部分沒有關機的習慣，因此更新代碼後，手機本地瀏覽器緩存之前js文件的路徑，但是遠程服務器的js文件名已經修改成了新的文件名，舊的文件不再存在，因此跳轉的時候請求的js文件就會出現404錯誤。

解決方案：

1）可以抓取路由的跳轉錯誤，然後跳轉另一個地址，再跳轉回原頁面，實現手動刷新。

　　component: ()=>import("./home.vue").catch(err)

註意：在自動刷新的時候，不能使用 window.location.reload() 刷新。因為當瀏覽器拋出載入頁面錯誤的時候，地址欄還沒有更新地址。如果你利用給 window.location.href 賦值的方式刷新頁面，那麽這個地址會被前端路由攔截到。所以有效的辦法是讓瀏覽器先跳轉到另外一個域名，再跳轉回來。

生產環境，vue頁面跳轉的時候，js報404的問題