Vue項目每次發(fā)版后要清理瀏覽器緩存問題解決辦法

更新時間：2024年02月22日 09:34:19 作者：itdhp

最近項目更新頻繁,每次一更新客戶都說還跟之前的一樣,一查原因是因為客戶沒有清空瀏覽器的緩存,所以為了方便客戶看到最新版本,開始調(diào)研再發(fā)布新版本后自動清理緩存,這篇文章主要給大家介紹了關(guān)于Vue項目每次發(fā)版后要清理瀏覽器緩存問題的解決辦法,需要的朋友可以參考下

打包的時候給每個打包文件后面加一個時間戳，通過 vue.config.js 配置

const timeStamp = new Date().getTime()
module.exports = {
  // 打包的時候不使用hash值.因為我們有時間戳來確定項目的唯一性了.
  filenameHashing: false,
  configureWebpack: {
    // 輸出重構(gòu) 打包編譯后的js文件名稱,添加時間戳
    output: {
      filename: `js/[name].${timeStamp}.js`,
      chunkFilename: `js/chunk.[id].${timeStamp}.js`,
    },
  },
  css: {
    // 打包后css文件名稱添加時間戳
    extract: {
      filename: `css/[name].${timeStamp}.css`,
      chunkFilename: `css/chunk.[id].${timeStamp}.css`,
    },
  },
}

這樣可以解決問題，每次打包發(fā)布之后，項目不需要強制清理緩存就可以試試更新內(nèi)容了。但是這時候又有一個新問題產(chǎn)生。就是這樣打包完發(fā)布之后，因為每次的文件名不一樣，項目中偶爾會報錯 ChunkLoadError: Loading chunk failed。原因就是瀏覽器取的是緩存中的文件名稱，新打包之后，文件名稱改變，導致瀏覽器找不到文件了 404。需要刷新頁面，重新加載文件。

先說一下單獨解決這個問題的方法

// 在main.js中
/* 路由異常錯誤處理，嘗試解析一個異步組件時發(fā)生錯誤，重新渲染目標頁面 */
router.onError((error) => {
  const pattern = /Loading chunk (\d)+ failed/g
  const isChunkLoadFailed = error.message.match(pattern)
  const targetPath = router.history.pending.fullPath
  if (isChunkLoadFailed) {
    // 用路由的replace方法，
    // 并沒有相當于F5刷新頁面，
    // 失敗的js文件并沒有從新請求，
    // 會導致一直嘗試replace頁面導致死循環(huán)，
    // 而用 location.reload 方法，相當于觸發(fā)F5刷新頁面，
    // 雖然用戶體驗上來說會有刷新加載察覺，但不會導致頁面卡死及死循環(huán)，
    // 從而曲線救國解決該問題
    window.location.reload()
    // router.replace(targetPath);
  } else {
    console.log('no')
  }
})

當捕獲到 Loading chunk {n} failed 的錯誤時我們重新渲染目標頁面，這種實現(xiàn)明顯更簡單和友好。

結(jié)合我們上面的問題，想到了一個新的解決方式，在打包的時候，文件名稱不變，使用版本號。這樣也可以實現(xiàn)每次打包發(fā)布后不需要強制清理緩存，又不會出現(xiàn)找不到文件的情況

在 vue.config.js 中，將 name.timeStamp.js 改成 name.js?v=timeStamp

const timeStamp = new Date().getTime()
module.exports = {
  configureWebpack: {
    output: {
      filename: `js/[name].js?v=${timeStamp}`,
      chunkFilename: `js/chunk.[id].js?v=${timeStamp}`,
    },
  },
  css: {
    extract: {
      filename: `css/[name].css?v=${timeStamp}`,
      chunkFilename: `css/chunk.[id].css?v=${timeStamp}`,
    },
  },

總結(jié)

到此這篇關(guān)于Vue項目每次發(fā)版后要清理瀏覽器緩存問題解決的文章就介紹到這了,更多相關(guān)Vue發(fā)版后要清理瀏覽器緩存內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: