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