欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue-cli 打包后提交到線上出現(xiàn) "Uncaught SyntaxError:Unexpected token" 報錯

 更新時間：2018年11月06日 14:40:13   作者：Sam_Lii  
這篇文章主要介紹了vue-cli 打包后提交到線上出現(xiàn) "Uncaught SyntaxError:Unexpected token" 報錯，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

前言: 項目使用vue-cli版本2.9.3 ,vue-router使用webpackChunkName實現(xiàn)按需加載.

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

問題1.導(dǎo)航點擊無法正常跳轉(zhuǎn),console打印:Error:Loading chunk {n} failed.

報錯截圖

問題2.頁面全白,console打印:Uncaught SyntaxError:Unexpected token <

報錯截圖:

經(jīng)過一番折騰,初步定位問題1在經(jīng)過build/webpack.prod.conf.js的chunkhash打包后的JS文件hash值會有變更,因為每次更新代碼到線上都會刪除舊的dist目錄,將最新的dist目錄copy上傳提供后臺更新. 在更新代碼的這個過程用戶停留在頁面上,當(dāng)用戶在更新完后重新操作就會導(dǎo)致報錯

問題1解決方法:捕獲路由報錯. (思路來源:http://www.dbjr.com.cn/article/147427.htm)

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) {//路由跳轉(zhuǎn)報錯,href手動跳轉(zhuǎn)
   sessionStorage.setItem('chunkError', 'reload');
   const targetPath = routers.history.pending.fullPath;
   window.location.href = window.location.origin + targetPath;
  }else if(chunkBool === 'reload'){ //手動跳轉(zhuǎn)后依然報錯,強(qiáng)制刷新
   sessionStorage.setItem('chunkError', Date.now());
   window.location.reload(true);
  }
 }
})

問題2在Network查看js文件加載的時候發(fā)現(xiàn)某個js文件Response Headercontent-type異常,正常情況返回content-type: application/javascript. 但是有一個js響應(yīng)的內(nèi)容為HTML, js無法識別<符號導(dǎo)致拋出報錯


問題2目前還在與后臺商量如何解決,解決后會更新解決方法分享.有同學(xué)遇到同樣的問題可以一起討論或提出更好的解決方案參考學(xué)習(xí).★★★

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • 解決ant Design Search無法輸入內(nèi)容的問題

    解決ant Design Search無法輸入內(nèi)容的問題

    這篇文章主要介紹了解決ant Design Search無法輸入內(nèi)容的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-10-10
  • 詳解在vue-cli中使用graphql即vue-apollo的用法

    詳解在vue-cli中使用graphql即vue-apollo的用法

    這篇文章主要介紹了詳解在vue-cli中使用graphql即vue-apollo的用法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-09-09
  • Vue使用NProgress實現(xiàn)頁面頂部的進(jìn)度條顯示效果

    Vue使用NProgress實現(xiàn)頁面頂部的進(jìn)度條顯示效果

    這篇文章主要介紹了vue Nprogress頁面頂部進(jìn)度條功能實現(xiàn),NProgress是頁面跳轉(zhuǎn)是出現(xiàn)在瀏覽器頂部的進(jìn)度條，本文通過實例代碼給大家講解，需要的朋友可以參考下
    2022-12-12
  • VUE3中watch和watchEffect的用法詳解

    VUE3中watch和watchEffect的用法詳解

    本文主要介紹了VUE3中watch和watchEffect的用法詳解，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-02-02
  • Vue?2中實現(xiàn)CustomRef方式防抖節(jié)流

    Vue?2中實現(xiàn)CustomRef方式防抖節(jié)流

    這篇文章主要為大家介紹了Vue?2中實現(xiàn)CustomRef方式防抖節(jié)流示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2023-02-02
  • Vue中遍歷數(shù)組的新方法實例詳解

    Vue中遍歷數(shù)組的新方法實例詳解

    這篇文章主要介紹了Vue中遍歷數(shù)組的新方法,本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下
    2019-07-07
  • Vue組件化開發(fā)思考

    Vue組件化開發(fā)思考

    這篇文章主要介紹了Vue組件化開發(fā)的思考以及相關(guān)的原理介紹，如果你對此有興趣，可以學(xué)習(xí)參考下。
    2018-02-02
  • Ant design vue中的聯(lián)動選擇取消操作

    Ant design vue中的聯(lián)動選擇取消操作

    這篇文章主要介紹了Ant design vue中的聯(lián)動選擇取消操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-10-10
  • 一看就會的vuex實現(xiàn)登錄驗證（附案例）

    一看就會的vuex實現(xiàn)登錄驗證（附案例）

    這篇文章主要介紹了一看就會的vuex實現(xiàn)登錄驗證（附案例），文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-01-01
  • 函數(shù)式組件劫持替代json封裝element表格

    函數(shù)式組件劫持替代json封裝element表格

    這篇文章主要介紹了為大家函數(shù)式組件劫持替代json封裝element表格的過程思路及示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2022-07-07

最新評論