Vue打包後放到服務器出現Loading chunk {n} failed 錯誤的解決辦法

這個報錯的主要原因是因爲vue通過webpack打包生成多個模塊js文件，我們把build後的文件上傳到服務器，這時是第一次上傳，我們訪問時不會出現該報錯。但是正常的項目都會需要更新迭代，當我們再次打包後某些js文件就會改變，再上傳到服務器後，由於瀏覽器緩存問題，用戶在訪問的時候還會再訪問之前的js文件，這是就會出現Loading chunk {n} failed這種報錯。
哪怕我們解決瀏覽器的緩存問題也不能避免掉這種情況，尤其是在開發時上傳測試環境就會經常碰見這種情況。比如：因爲一般Vue項目大部分都是單頁面應用，當我們使用vue-router並且使用路由懶加載的情況下，我們訪問當前應用進行路由跳轉時都是實時動態的從服務器上拉取相應模塊的js文件，這時候我們改完代碼打包上線，js文件名更換了，路由跳轉的時候由於頁面並未刷新，所以還是訪問的原來的文件名，這是就會出現找不到模塊的錯誤。
接下來說解決辦法：
我們需要給路由加一個錯誤的回調方法，在監聽到路由報錯之後進行頁面刷新操作，這時就可以獲取到當前最新的代碼來解決報錯問題。

router.onError((error) => {
  const pattern = /Loading chunk (\d)+ failed/g;
  const isChunkLoadFailed = error.message.match(pattern);
  if (isChunkLoadFailed) {
    window.location.reload();
    // router.replace(router.history.pending.fullPath);
  }else{
    console.log(error)
  }
});