vue-cli 打包后提交到線上出現 "Uncaught SyntaxError:Unex

Allen 發布于2019-08-23 12:50 / 2752人閱讀

摘要：前言項目使用版本使用實現按需加載描述該報錯在項目上線一段時間后有用戶反映頁面無法正常游覽后面以問題問題區分問題導航點擊無法正常跳轉刷新后恢復正常打印報錯截圖問題頁面全白并且刷新仍然無效打印報錯截圖經過一番折騰初步定位問題在經過的打包后的

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

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

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

報錯截圖

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

報錯截圖:

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

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

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無法識別<符號導致拋出報錯

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

GPU云服務器云服務器 cdn加速后出現504 提交后為什么 android打包后 js 提交后清空表單

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99034.html

Vue-項目從本地搭建到線上部署（wǒ shì biaō tí dǎng）

摘要：放置在目錄下或通過絕對路徑被引用。對于相關來說，我們推薦使用而不是直接鏈式指定。在不更改配置文件的情況下，前端頁面迭代發布，不需要重啟服務。作者：gauseen 0. 關于 Vuejs 簡介：Vue (讀音 /vju?/，類似于 view) 是一套用于構建用戶界面的漸進式框架，易用、靈活、高效。生態系統項目介紹 awesome-vue Vue.js 相關很棒的...

Arno 2019-08-26 13:49 評論0 收藏0
網站子目錄部署VUE webpack 打包資源文件路徑的正確引用方式

摘要：是目前使用最為火熱的打包工具，各大知名的框架類庫都用其打包，國內使用最近也火熱起來。但是坑也很多，比如說圖片，字體等文件的路徑。 webpack 是目前使用最為火熱的打包工具，各大知名的框架類庫都用其打包，國內使用最近也火熱起來。它在單頁應用和類庫打包上幫助許多人從代碼管理中解脫了出來，成為了當下風靡一時的打包工具。但是坑也很多，比如說圖片，字體等文件的路徑。剛開始用webpack...

zgbgx 2019-08-21 17:45 評論0 收藏0
vue先hash 模式部署項目，然后開啟histroy模式，引發的幾個問題以及histroy模式的

摘要：先模式，后模式就像開頭說的，這里的問題指的是先用模式部署項目到線上，然后再開啟模式，由此引發的一些問題。后話以上就是本文的所有內容，建議項目一開始還是直接跟后端說一下，開啟模式，省得后面的種種坑。前言： vue路由有一個HTML5 History 模式,這個模式要在路由里面另外開啟的，很多人在剛使用路由的時候之前不知道這個模式，所以并沒有啟用，然后就把項目部署上去了，因為這個模式還是...

Imfan 2019-08-21 18:23 評論0 收藏0
前端開發之走進Vue.js

摘要：作為目前最熱門最具前景的前端框架之一，其提供了一種幫助我們快速構建并開發前端項目的新的思維模式。的新版本，的簡稱。的包管理工具，用于同一管理我們前端項目中需要用到的包插件工具命令等，便于開發和維護。 Vue.js作為目前最熱門最具前景的前端框架之一，其提供了一種幫助我們快速構建并開發前端項目的新的思維模式。本文旨在幫助大家認識Vue.js，了解Vue.js的開發流程，并進一步理解如何通...

zxhaaa 2019-08-20 15:20 評論0 收藏0