vue項目部署自動清除緩存方式

更新時間：2023年07月25日 11:19:26 作者：天邊月_

這篇文章主要介紹了vue項目部署自動清除緩存方式,包括清除文件緩存，清除瀏覽器 localStorage 緩存方式，本文結合示例代碼給大家介紹的非常詳細，需要的朋友可以參考下

清除文件緩存

1.index.html 文件添加 http-equiv(http 響應頭)

通過在head標簽中添加meta，當瀏覽器訪問index.html時，會向服務器重新請求靜態(tài)資源。該方法了解即可，不推薦使用，會導致用戶每次訪問程序都需要重新請求服務器，所有靜態(tài)資源都無法使用緩存，浪費流量，網(wǎng)絡壓力大。

// 設定網(wǎng)頁的到期時間，一旦網(wǎng)頁過期，必須到服務器上重新傳輸。
<meta http-equiv="Expires" content="0">
// 設定禁止瀏覽器從本地機的緩存中調閱頁面內容
<meta http-equiv="Pragma" content="no-cache">
// 清除緩存，再次訪問這個網(wǎng)址要重新下載
<meta http-equiv="Cache-control" content="no-cache">

2.給打包的js、css文件添加時間戳

項目打包時給js、css文件加上時間戳，保證輸出的文件名不會相同，通過 vue.config.js 進行配置。

// 獲取當前時間戳
const timeStamp = new Date().getTime()
// 時間戳配置
module.exports = {
  // 打包后的文件輸出路徑
  outputDir: 'dist',
  configureWebpack: {
    // 輸出重構 打包編譯后的js文件名稱，添加時間戳
    output: {
      filename: `js/[name].${timeStamp}.js`,
      chunkFilename: `js/[name].${timeStamp}.js`,
    }
  },
  css: {
    // 輸出重構 打包編譯后的css文件名稱，添加時間戳
    extract: {
      filename: `css/[name].${timeStamp}.css`,
      chunkFilename: `css/[name].${timeStamp}.css`,
    }
  }
}

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

清除瀏覽器 localStorage 緩存

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

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()
}

到此這篇關于vue項目部署，自動清除緩存配置的文章就介紹到這了,更多相關vue自動清除緩存內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: