快捷導(dǎo)航

Vue項(xiàng)目打包部署后瀏覽器自動(dòng)清除緩存問題的解決方法

更新時(shí)間：2024年12月11日 10:05:20 作者：web13508588635

這篇文章主要介紹了vue打包部署后瀏覽器緩存問題,導(dǎo)致控制臺(tái)報(bào)錯(cuò)ChunkLoadError: Loading chunk failed的解決方案,文中有相關(guān)的圖文和代碼供大家參考,具有一定的參考價(jià)值,需要的朋友可以參考下

一、報(bào)錯(cuò)如下：

每次build打包部署到服務(wù)器上時(shí)，偶爾會(huì)出現(xiàn)前端資源文件不能及時(shí)更新到最新，瀏覽器存在緩存問題，這時(shí)在當(dāng)前頁面進(jìn)行按鈕點(diǎn)擊等事件處理時(shí)，控制臺(tái)報(bào)錯(cuò)chunk load error，如下顯示：

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

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

二、解決：

1、在index.html入口文件處設(shè)置meta標(biāo)簽，清除頁面緩存。

<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">

2、vue.config.js 配置js、css打包配置，在css、js打包文件添加版本號(hào)時(shí)間戳，區(qū)別版本

const path = require('path')
const timeStamp= new Date().getTime()
const isPro = process.env.NODE_ENV === 'production'
module.exports = {
  configureWebpack: {
    output: {
      filename: `js/[name].js?v=${timeStamp}`,
      chunkFilename: `js/[name].js?v=${timeStamp}`,
    },
  },
 css: {
    // 輸出重構(gòu) 打包編譯后的css文件名稱，添加時(shí)間戳
    extract: {
      filename: `css/[name].${timeStamp}.css`,
      chunkFilename: `css/[name].${timeStamp}.css`,
    },
  }
}

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

Tips

filename：指列在 entry（入口）中，打包后輸出的文件的名稱
chunkFilename：指未列在 entry 中，卻又需要被打包出來的文件的名稱（懶加載的文件）

三.打包測試

發(fā)現(xiàn) JS 后參數(shù)帶上我設(shè)置的時(shí)間戳啦，測試成功。

清除瀏覽器 localStorage 緩存

1、更新package.json中的 version 值，每次打包往上遞增
2、main.js中，根據(jù) version 判斷是否進(jìn)行緩存清理

const VUE_APP_VERSION = require('../package.json').version
const vers = window.localStorage.getItem('appVersion')
if(VUE_APP_VERSION != vers){
  localStorage.clear()
  window.localStorage.setItem('appVersion', VUE_APP_VERSION)
  location.reload()
}

Tips

有時(shí)版本不一樣，可以找webpack.prod.conf文件進(jìn)行修改噢~

到此這篇關(guān)于Vue項(xiàng)目打包部署后瀏覽器自動(dòng)清除緩存問題的解決方法的文章就介紹到這了,更多相關(guān)Vue瀏覽器自動(dòng)清除緩存內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: