Vue?SPA怎么解決瀏覽器緩存問題

這篇文章主要介紹“Vue SPA怎么解決瀏覽器緩存問題”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“Vue SPA怎么解決瀏覽器緩存問題”文章能幫助大家解決問題。

Vue SPA 解決瀏覽器緩存

如何讓發布到線上的 vue 單頁應用能及時更新到瀏覽器，而無需用戶強制刷新頁面呢？

因為 js、css、圖片等資源文件名帶有 hash 值，只要文件名變了就會更新，所以可以設置緩存，但 html 文件名沒有加 hash 值，所以不能緩存該文件。

在 nginx.conf 中設置

        location / {
            root html/dist;
            index index.html index.htm;
            if ($request_filename ~* .*\.(js|css|woff|png|jpg|jpeg)$) {
                expires    100d;  # js、css、圖片緩存100天(因為文件名有hash)
                #add_header Cache-Control "max-age = 8640000"; # 或者設置max-age
            }
         
            if ($request_filename ~* .*\.(?:htm|html)$) {
                add_header Cache-Control "no-store";  # html不緩存(因為文件名沒有加hash)
            }
        }

通過上述配置，讓瀏覽器不緩存 html 文件。

Vue 微信瀏覽器緩存問題

1.試過js、css打包時添加時間戳，因為打包后每次都是新名字的文件，所以感覺加不加時間戳都沒有效果 試了一下果然

原因應該是微信瀏覽器緩存了index.html, 所以打開緩存的頁面根本沒有任何請求

2.試過index.html添加meta標簽，設置不緩存頁面，親測也無效

3.index.html 試過添加參數，本以為微信瀏覽器會認為是一個新頁面， 但是無果

4.js 間隔時間自動刷新window.location.href 體驗不好，還是去掉了

5.既然前端試了很多種辦法 還是無效，只能在服務端配置了，

location = /index.html { 
    add_header Cache-Control "no-cache, no-store"; 
}

這句話應該也是讓index.html不緩存，嘗試了下，這種辦法沒有兼容問題，安卓和ios每次打開頁面都及時更新了

關于“Vue SPA怎么解決瀏覽器緩存問題”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。