1. 程式人生 > >生產環境,vue頁面跳轉的時候,js報404的問題

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

location ams ring webpack 懶加載 vue ati 錯誤 load()

最近上線的一個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的問題