Vue 打包部署后瀏覽器緩存問題,導致控制臺報錯ChunkLoadError: Loading chunk failed的解決方案

一、報錯如下:

每次build打包部署到服務(wù)器上時,偶爾會出現(xiàn)前端資源文件不能及時更新到最新,瀏覽器存在緩存問題,這時在當前頁面進行按鈕點擊等事件處理時,控制臺報錯chunk load error,如下顯示:

原因:通過查看當前sources里的文件,可以發(fā)現(xiàn):控制臺報錯提示中所請求的js文件哈希值跟sources緩存的文件哈希值并不一樣,說明 當前頁面請求了緩存,然而由于資源文件被更新 導致找不到 出現(xiàn)404的情況。

直接解決辦法:清除瀏覽器緩存。(但是每次部署 都要讓用戶重新清一次緩存不是很友好)下面通過其他方式解決這個問題。

二、解決:
1、在index.html入口文件處設(shè)置meta標簽,清除頁面緩存。

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="expires" content="0">

PS:各字段值詳解(貼鏈接):

https://www.cnblogs.com/laneyfu/p/9467784.html

淺談http中的Cache-Control

但是這種方法貌似沒什么作用,并沒有解決我的問題

2、vue.config.js文件中配置,給每次打包的文件名后面添加一個哈希值,以供瀏覽器區(qū)分。

const timeStamp = new Date().getTime();
module.exports = {
    publicPath:"/",
    configureWebpack: { // webpack 配置
 output: { // 把應(yīng)用打包成umd庫格式
      library:'myLibrary', // 輸出重構(gòu)  打包編譯后的文件名稱  【模塊名稱.時間戳】
 filename: `[name].${timeStamp}.js`,
      libraryTarget:'umd',
      globalObject:'this',
    },
  },
}

這樣每次打包出來的js文件都不一樣,也就解決了瀏覽器的緩存問題。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容