場景描述

為什麼前端部署後會有快取呢？原因有以下幾種：

1. index.html由於是在打包的時候處在public資料夾下，所以他的檔案是不變得。所以會有快取存在
2. js,以及css檔案採用預設的打包機制，只是檔案增加hash值，在某種情況下會存在hash值不變導致的快取
3. 伺服器快取

解決方案

1 index.html 快取解決
通過在head標籤中新增meta即可，瀏覽器當訪問index.html的時候，會去伺服器諮詢伺服器是否需要更新。伺服器走協商快取處理邏輯，程式碼如下：

<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. js和css快取
   在webpack中，我們可以通過配置output來管理輸出，因此我們只需要在vue.config.js配置檔案中將output修改，就能滿足了。如何能保證輸出的檔名是不會相同的呢，最簡單的方法就是使用時間戳的方式。程式碼如下：

const version = new Date().getTime();
module.exports = {
    configureWebpack: config => {
      Object.assign(config,{
        entry: {
          app: '/src/main.ts'
        },
        output:{
          ...config.output,
          filename:`static/js/[name].[hash].${version}.js`,
          chunkFilename:`static/js/[name].[hash].${version}.js`,
        }
      });
  }
 

3.伺服器快取
由於我們現在大都採用nginx進行服務轉發，所以有的時候會存在nginx快取、所以我們只需要在nginx.conf檔案增加Cache-Control配置即可。程式碼如下：

        location ~* \.(htm|html)$ {
            root   html;
            expires -1;
            add_header Cache-Control no-store;
            add_header Pragma no-cache; 
        } 

但是如果這樣設定後，其實可以理解為每次都需要去諮詢伺服器是否更新，這樣每次重新整理頁面的時候，會導致載入時間太長。各位酌情加

至此vue專案部署上線需要清理快取問題解決了。

本文源自：https://juejin.cn/post/7091213810773540878