vue-cli 打包後提交到線上出現 "Uncaught SyntaxError:Unexpected token <" 報錯

時間 2019-11-08

標籤 vue cli 打包提交線上出現 uncaught syntaxerror unexpected token 報錯简体版

原文原文鏈接

前言: 項目使用vue-cli版本2.9.3 ,vue-router使用webpackChunkName實現按需加載.
javascript

BUG描述:該報錯在項目上線一段時間後,有用戶反映頁面沒法正常遊覽 (後面以問題1/問題2區分)html

問題1.導航點擊沒法正常跳轉,刷新後恢復正常. console打印:Error:Loading chunk {n} failed.vue

報錯截圖

問題2.頁面全白,而且刷新仍然無效. console打印:Uncaught SyntaxError:Unexpected token <java

報錯截圖:

通過一番折騰,初步定位問題1在通過build/webpack.prod.conf.js的chunkhash打包後的JS文件hash值會有變動,由於每次更新代碼到線上都會刪除舊的dist目錄,將最新的dist目錄copy上傳提供後臺更新. 在更新代碼的這個過程用戶停留在頁面上,當用戶在更新完後從新操做就會致使報錯webpack

問題1解決方法:捕獲路由報錯. (思路來源:https://segmentfault.com/a/11... )web

routers.onError((err) => {
  const pattern = /Loading chunk (\d)+ failed/g;
  const isChunkLoadFailed = err.message.match(pattern);
  if (isChunkLoadFailed) {
    let chunkBool = sessionStorage.getItem('chunkError');
    let nowTimes = Date.now();
    if (chunkBool === null || chunkBool && nowTimes - parseInt(chunkBool) > 60000) {//路由跳轉報錯,href手動跳轉
      sessionStorage.setItem('chunkError', 'reload');
      const targetPath = routers.history.pending.fullPath;
      window.location.href = window.location.origin + targetPath;
    }else if(chunkBool === 'reload'){ //手動跳轉後依然報錯,強制刷新
      sessionStorage.setItem('chunkError', Date.now());
      window.location.reload(true);
    }
  }
})

問題2在Network查看js文件加載的時候發現某個js文件Response Headercontent-type異常,正常狀況返回content-type: application/javascript. 可是有一個js響應的內容爲HTML, js沒法識別<符號致使拋出報錯

vue-router

問題2解決方法: 通過問題排查發現,vue-cli默認build後的文件名格式爲js/[name].[chunkhash].js,每次npm run build後有改動的文件hash值都會改變,上傳後Nginx沒法找到最新上傳的文件,因此返回了默認index.html裏的內容,咱們的文件後綴名是.js天然沒法識別<html>這種標籤符號,致使console拋出Uncaught SyntaxError:Unexpected token <,我嘗試修改build/webpack.prod.conf.jsoutput輸出文件名格式,目前問題已獲得解決
vue-cli

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。