vue項目中禁用瀏覽器緩存配置案例

Posted on by

項目發佈版本會遇到經常需要清理緩存的問題,以下是項目禁用緩存的實際方法

1.public文件夾中修改 index.html文件meta配置

image.png 

    <meta http-equiv="pragram" content="no-cache" />
    <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="expires" content="0" />

2.vue cli 構建配置(針對vue3以下版本)

在vue.config.js新增配置

const Timestamp = new Date().getTime()
module.exports = {
  configureWebpack: {
    output: { // 輸出重構  打包編譯後的 文件名稱  【模塊名稱.版本號(可選).時間戳】
      filename: `[name].${Timestamp}.js`,
      chunkFilename: `[name].${Timestamp}.js`
    },
  },
  css: {
    extract: { // 打包後css文件名稱添加時間戳
      filename: `css/[name].${Timestamp}.css`,
      chunkFilename: `css/[name].${Timestamp}.css`
    }
  },
}

3.Nginx配置

禁用掉nginx緩存，讓瀏覽器每次到服務器去請求文件，而不是在瀏覽器中讀取緩存文件。

當程序調試好上線後,可以開啟nginx緩存,節省服務器的帶寬流量，減少一些請求，降低服務器的壓力。

image.png

在nginx.conf文件裡配置html文件默認加header 不緩存配置

以下實際項目中nginx緩存配置

  location ~ .*\.(?:htm|html)$ {
    add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
  }

Nginx靜態資源緩存設置 https://www.jb51.net/article/222620.htm

到此這篇關於vue項目中禁用瀏覽器緩存配置案例的文章就介紹到這瞭,更多相關vue項目中禁用瀏覽器緩存配置內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：