vue项目 如何解决浏览器缓存问题
目錄
1.什么是瀏覽器緩存
2.瀏覽器緩存類型
3.瀏覽器緩存的優勢與劣勢
4. 瀏覽器緩存機制
5.如何清除瀏覽器緩存
在代碼更新發布后，都會要求運營人員在訪問網址時清除下本地緩存，防止萬一掉坑
那問題就來了：每次清緩存很麻煩，怎樣就不需要他們每次去手動清緩存呢？這就涉及到了瀏覽器緩存的問題
1.什么是瀏覽器緩存
瀏覽器緩存（Browser Caching）是為了節約網絡的資源加速瀏覽，瀏覽器在用戶磁盤上對最近請求過的文檔進行存儲，當訪問者再次請求這個頁面時，瀏覽器就可以從本地磁盤顯示文檔，這樣就可以加速頁面的閱覽
2.瀏覽器緩存類型
- 緩存協商：Last-modified ，Etag
- 徹底緩存（強制緩存）：cache-control，Expires
3.瀏覽器緩存的優勢與劣勢
優勢：
- 節約網絡資源，提高網絡效率
- 降低服務器壓力，減少服務器負擔
缺點：
- 緩存沒有清理機制
- 占用硬盤空間
- 頁面緩存，導致頁面樣式、圖片或腳本等未能及時更新展示
4. 瀏覽器緩存機制
查閱這里：https://www.cnblogs.com/vajoy/p/5341664.html
還有這里：https://blog.csdn.net/u014590757/article/details/80140654
還有這里：https://www.jianshu.com/p/1a1536ab01f1
還有：https://www.cnblogs.com/kevingrace/p/10459429.html
5.如何清除瀏覽器緩存
- 修改根目錄index.htm?讓所有的css/js資源重新加載 // index.html <head> <meta http-equiv="pragram" content="no-cache"> <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate"> </head>
-
配置 nginx 不緩存 html
vue默認配置，打包后css和js的名字后面都加了哈希值，不會有緩存問題。但是index.html在服務器端可能是有緩存的，需要在服務器配置不讓緩存index.html?
server {listen 80;server_name yourdomain.com;location / {try_files $uri $uri/ /index.html;root /yourdir/;index index.html index.htm;if ($request_filename ~* .*\.(?:htm|html)$){add_header Cache-Control "no-cache, no-store"; //對html文件設置永遠不緩存} } }no-cache:數據內容不能被緩存, 每次請求都重新訪問服務器, 若有max-age, 則緩存期間不訪問服務器
? ? ? ? no-store:不僅不能緩存, 連暫存也不可以(即: 臨時文件夾中不能暫存該資源)
- 打包的文件路徑添加時間戳?
使用vue腳手架搭建的項目，打開vue.config.js
//vue.config.js const version = new Date().getTime(); module.exports = {css: {// 是否使用css分離插件 ExtractTextPluginextract: {// 修改打包后css文件名 // css打包文件，添加時間戳filename: `css/[name].${version}.css`, chunkFilename: `css/[name].${version}.css`}},configureWebpack: {output: { // 輸出重構 打包編譯后的 文件名稱 【模塊名稱.版本號.時間戳】filename: `[name].${process.env.VUE_APP_Version}.${Timestamp}.js`,chunkFilename: `[name].${process.env.VUE_APP_Version}.${Timestamp}.js`}} }總結
以上是生活随笔為你收集整理的vue项目 如何解决浏览器缓存问题的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： TeeChart柱状图
- 下一篇： html5倒计时秒杀怎么做,vue 设