資訊專欄INFORMATION COLUMN
摘要：前言項(xiàng)目使用版本使用實(shí)現(xiàn)按需加載描述該報(bào)錯(cuò)在項(xiàng)目上線一段時(shí)間后有用戶反映頁(yè)面無(wú)法正常游覽后面以問題問題區(qū)分問題導(dǎo)航點(diǎn)擊無(wú)法正常跳轉(zhuǎn)刷新后恢復(fù)正常打印報(bào)錯(cuò)截圖問題頁(yè)面全白并且刷新仍然無(wú)效打印報(bào)錯(cuò)截圖經(jīng)過一番折騰初步定位問題在經(jīng)過的打包后的
前言: 項(xiàng)目使用vue-cli版本2.9.3 ,vue-router使用webpackChunkName實(shí)現(xiàn)按需加載.
BUG描述:該報(bào)錯(cuò)在項(xiàng)目上線一段時(shí)間后,有用戶反映頁(yè)面無(wú)法正常游覽 (后面以問題1/問題2區(qū)分)
問題1.導(dǎo)航點(diǎn)擊無(wú)法正常跳轉(zhuǎn),刷新后恢復(fù)正常. console打印:Error:Loading chunk {n} failed.
報(bào)錯(cuò)截圖
問題2.頁(yè)面全白,并且刷新仍然無(wú)效. console打印:Uncaught SyntaxError:Unexpected token <
報(bào)錯(cuò)截圖:
經(jīng)過一番折騰,初步定位問題1在經(jīng)過build/webpack.prod.conf.js的chunkhash打包后的JS文件hash值會(huì)有變更,因?yàn)槊看胃麓a到線上都會(huì)刪除舊的dist目錄,將最新的dist目錄copy上傳提供后臺(tái)更新. 在更新代碼的這個(gè)過程用戶停留在頁(yè)面上,當(dāng)用戶在更新完后重新操作就會(huì)導(dǎo)致報(bào)錯(cuò)
問題1解決方法:捕獲路由報(bào)錯(cuò). (思路來源: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) {//路由跳轉(zhuǎn)報(bào)錯(cuò),href手動(dòng)跳轉(zhuǎn)
sessionStorage.setItem("chunkError", "reload");
const targetPath = routers.history.pending.fullPath;
window.location.href = window.location.origin + targetPath;
}else if(chunkBool === "reload"){ //手動(dòng)跳轉(zhuǎn)后依然報(bào)錯(cuò),強(qiáng)制刷新
sessionStorage.setItem("chunkError", Date.now());
window.location.reload(true);
}
}
})
問題2在Network查看js文件加載的時(shí)候發(fā)現(xiàn)某個(gè)js文件Response Headercontent-type異常,正常情況返回content-type: application/javascript. 但是有一個(gè)js響應(yīng)的內(nèi)容為HTML, js無(wú)法識(shí)別<符號(hào)導(dǎo)致拋出報(bào)錯(cuò)
問題2解決方法: 經(jīng)過問題排查發(fā)現(xiàn),vue-cli默認(rèn)build后的文件名格式為js/[name].[chunkhash].js,每次npm run build后有改動(dòng)的文件hash值都會(huì)改變,上傳后Nginx無(wú)法找到最新上傳的文件,所以返回了默認(rèn)index.html里的內(nèi)容,我們的文件后綴名是.js自然無(wú)法識(shí)別這種標(biāo)簽符號(hào),導(dǎo)致console拋出Uncaught SyntaxError:Unexpected token <,我嘗試修改build/webpack.prod.conf.jsoutput輸出文件名格式,目前問題已得到解決
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/99034.html
摘要：放置在目錄下或通過絕對(duì)路徑被引用。對(duì)于相關(guān)來說，我們推薦使用而不是直接鏈?zhǔn)街付āＴ诓桓呐渲梦募那闆r下，前端頁(yè)面迭代發(fā)布，不需要重啟服務(wù)。 作者：gauseen 0. 關(guān)于 Vuejs 簡(jiǎn)介：Vue (讀音 /vju?/，類似于 view) 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架，易用、靈活、高效。 生態(tài)系統(tǒng) 項(xiàng)目 介紹 awesome-vue Vue.js 相關(guān)很棒的...
摘要：是目前使用最為火熱的打包工具，各大知名的框架類庫(kù)都用其打包，國(guó)內(nèi)使用最近也火熱起來。但是坑也很多，比如說圖片，字體等文件的路徑。 webpack 是目前使用最為火熱的打包工具，各大知名的框架類庫(kù)都用其打包，國(guó)內(nèi)使用最近也火熱起來。它在單頁(yè)應(yīng)用和類庫(kù)打包上幫助許多人從代碼管理中解脫了出來，成為了當(dāng)下風(fēng)靡一時(shí)的打包工具。 但是坑也很多，比如說圖片，字體等文件的路徑。 剛開始用webpack...
摘要：先模式，后模式就像開頭說的，這里的問題指的是先用模式部署項(xiàng)目到線上，然后再開啟模式，由此引發(fā)的一些問題。后話以上就是本文的所有內(nèi)容，建議項(xiàng)目一開始還是直接跟后端說一下，開啟模式，省得后面的種種坑。 前言： vue路由有一個(gè)HTML5 History 模式,這個(gè)模式要在路由里面另外開啟的，很多人在剛使用路由的時(shí)候之前不知道這個(gè)模式，所以并沒有啟用，然后就把項(xiàng)目部署上去了，因?yàn)檫@個(gè)模式還是...
摘要：作為目前最熱門最具前景的前端框架之一，其提供了一種幫助我們快速構(gòu)建并開發(fā)前端項(xiàng)目的新的思維模式。的新版本，的簡(jiǎn)稱。的包管理工具，用于同一管理我們前端項(xiàng)目中需要用到的包插件工具命令等，便于開發(fā)和維護(hù)。 Vue.js作為目前最熱門最具前景的前端框架之一，其提供了一種幫助我們快速構(gòu)建并開發(fā)前端項(xiàng)目的新的思維模式。本文旨在幫助大家認(rèn)識(shí)Vue.js，了解Vue.js的開發(fā)流程，并進(jìn)一步理解如何通...
閱讀 3652·2021-11-23 10:13
閱讀 998·2021-09-22 16:01
閱讀 1036·2021-09-09 09:33
閱讀 830·2021-08-05 09:58
閱讀 1874·2019-08-30 11:14
閱讀 2180·2019-08-30 11:02
閱讀 3396·2019-08-29 16:28
閱讀 1621·2019-08-29 16:09
