快捷導(dǎo)航

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

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

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

打包的時(shí)候給每個(gè)打包文件后面加一個(gè)時(shí)間戳，通過(guò) vue.config.js 配置

const timeStamp = new Date().getTime()
module.exports = {
  // 打包的時(shí)候不使用hash值.因?yàn)槲覀冇袝r(shí)間戳來(lái)確定項(xiàng)目的唯一性了.
  filenameHashing: false,
  configureWebpack: {
    // 輸出重構(gòu) 打包編譯后的js文件名稱,添加時(shí)間戳
    output: {
      filename: `js/[name].${timeStamp}.js`,
      chunkFilename: `js/chunk.[id].${timeStamp}.js`,
    },
  },
  css: {
    // 打包后css文件名稱添加時(shí)間戳
    extract: {
      filename: `css/[name].${timeStamp}.css`,
      chunkFilename: `css/chunk.[id].${timeStamp}.css`,
    },
  },
}

這樣可以解決問(wèn)題，每次打包發(fā)布之后，項(xiàng)目不需要強(qiáng)制清理緩存就可以試試更新內(nèi)容了。但是這時(shí)候又有一個(gè)新問(wèn)題產(chǎn)生。就是這樣打包完發(fā)布之后，因?yàn)槊看蔚奈募灰粯?，?xiàng)目中偶爾會(huì)報(bào)錯(cuò) ChunkLoadError: Loading chunk failed。原因就是瀏覽器取的是緩存中的文件名稱，新打包之后，文件名稱改變，導(dǎo)致瀏覽器找不到文件了 404。需要刷新頁(yè)面，重新加載文件。

先說(shuō)一下單獨(dú)解決這個(gè)問(wèn)題的方法

// 在main.js中
/* 路由異常錯(cuò)誤處理，嘗試解析一個(gè)異步組件時(shí)發(fā)生錯(cuò)誤，重新渲染目標(biāo)頁(yè)面 */
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方法，
    // 并沒(méi)有相當(dāng)于F5刷新頁(yè)面，
    // 失敗的js文件并沒(méi)有從新請(qǐng)求，
    // 會(huì)導(dǎo)致一直嘗試replace頁(yè)面導(dǎo)致死循環(huán)，
    // 而用 location.reload 方法，相當(dāng)于觸發(fā)F5刷新頁(yè)面，
    // 雖然用戶體驗(yàn)上來(lái)說(shuō)會(huì)有刷新加載察覺(jué)，但不會(huì)導(dǎo)致頁(yè)面卡死及死循環(huán)，
    // 從而曲線救國(guó)解決該問(wèn)題
    window.location.reload()
    // router.replace(targetPath);
  } else {
    console.log('no')
  }
})

當(dāng)捕獲到 Loading chunk {n} failed 的錯(cuò)誤時(shí)我們重新渲染目標(biāo)頁(yè)面，這種實(shí)現(xiàn)明顯更簡(jiǎn)單和友好。

結(jié)合我們上面的問(wèn)題，想到了一個(gè)新的解決方式，在打包的時(shí)候，文件名稱不變，使用版本號(hào)。這樣也可以實(shí)現(xiàn)每次打包發(fā)布后不需要強(qiáng)制清理緩存，又不會(huì)出現(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項(xiàng)目每次發(fā)版后要清理瀏覽器緩存問(wèn)題解決的文章就介紹到這了,更多相關(guān)Vue發(fā)版后要清理瀏覽器緩存內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: