vue打包部署後 瀏覽器快取問題,導致控制檯報錯ChunkLoadError: Loading chunk failed的解決方案
阿新 • • 發佈:2021-12-20
一、報錯如下:
每次build打包部署到伺服器上時,偶爾會出現前端資原始檔不能及時更新到最新,瀏覽器存在快取問題,這時在當前頁面進行按鈕點選等事件處理時,控制檯報錯chunk load error,如下顯示:
原因:通過檢視當前sources裡的檔案,可以發現:控制檯報錯提示中所請求的js檔案雜湊值跟sources快取的檔案雜湊值並不一樣,說明 當前頁面請求了快取,然而由於資原始檔被更新 導致找不到 出現404的情況。
直接解決辦法:清除瀏覽器快取。(但是每次部署 都要讓使用者重新清一次快取不是很友好)下面通過其他方式解決這個問題。
二、解決:
1、在index.html入口檔案處設定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
但是這種方法貌似沒什麼作用,並沒有解決我的問題
2、vue.config.js檔案中配置,給每次打包的檔名後面新增一個雜湊值,以供瀏覽器區分。
const timeStamp = new Date().getTime(); module.exports = { publicPath:"/", configureWebpack: { // webpack 配置 output: { // 把應用打包成umd庫格式 library:'myLibrary', // 輸出重構 打包編譯後的檔名稱 【模組名稱.時間戳】 filename: `[name].${timeStamp}.js`, libraryTarget:'umd', globalObject:'this', }, }, }
這樣每次打包出來的js檔案都不一樣,也就解決了瀏覽器的快取問題。