當(dāng)前位置：首頁(yè) > 前端技术 > vue >内容正文

vue

vue项目如何解决浏览器缓存问题

發(fā)布時(shí)間：2023/12/14 vue 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 vue项目如何解决浏览器缓存问题小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

1.什么是瀏覽器緩存

2.瀏覽器緩存類型

3.瀏覽器緩存的優(yōu)勢(shì)與劣勢(shì)

4. 瀏覽器緩存機(jī)制

5.如何清除瀏覽器緩存

在代碼更新發(fā)布后，都會(huì)要求運(yùn)營(yíng)人員在訪問(wèn)網(wǎng)址時(shí)清除下本地緩存，防止萬(wàn)一掉坑

那問(wèn)題就來(lái)了：每次清緩存很麻煩，怎樣就不需要他們每次去手動(dòng)清緩存呢？這就涉及到了瀏覽器緩存的問(wèn)題

1.什么是瀏覽器緩存

瀏覽器緩存（Browser Caching）是為了節(jié)約網(wǎng)絡(luò)的資源加速瀏覽，瀏覽器在用戶磁盤上對(duì)最近請(qǐng)求過(guò)的文檔進(jìn)行存儲(chǔ)，當(dāng)訪問(wèn)者再次請(qǐng)求這個(gè)頁(yè)面時(shí)，瀏覽器就可以從本地磁盤顯示文檔，這樣就可以加速頁(yè)面的閱覽

2.瀏覽器緩存類型

緩存協(xié)商：Last-modified ，Etag
徹底緩存（強(qiáng)制緩存）：cache-control，Expires

3.瀏覽器緩存的優(yōu)勢(shì)與劣勢(shì)

優(yōu)勢(shì)：

節(jié)約網(wǎng)絡(luò)資源，提高網(wǎng)絡(luò)效率
降低服務(wù)器壓力，減少服務(wù)器負(fù)擔(dān)

缺點(diǎn)：

緩存沒(méi)有清理機(jī)制
占用硬盤空間
頁(yè)面緩存，導(dǎo)致頁(yè)面樣式、圖片或腳本等未能及時(shí)更新展示

4. 瀏覽器緩存機(jī)制

查閱這里：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默認(rèn)配置，打包后css和js的名字后面都加了哈希值，不會(huì)有緩存問(wèn)題。但是index.html在服務(wù)器端可能是有緩存的，需要在服務(wù)器配置不讓緩存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"; //對(duì)html文件設(shè)置永遠(yuǎn)不緩存} } }
no-cache:數(shù)據(jù)內(nèi)容不能被緩存, 每次請(qǐng)求都重新訪問(wèn)服務(wù)器, 若有max-age, 則緩存期間不訪問(wèn)服務(wù)器

? ? ? ? no-store:不僅不能緩存, 連暫存也不可以(即: 臨時(shí)文件夾中不能暫存該資源)

打包的文件路徑添加時(shí)間戳?

使用vue腳手架搭建的項(xiàng)目，打開(kāi)vue.config.js

//vue.config.js const version = new Date().getTime(); module.exports = {css: {// 是否使用css分離插件 ExtractTextPluginextract: {// 修改打包后css文件名 // css打包文件，添加時(shí)間戳filename: `css/[name].${version}.css`, chunkFilename: `css/[name].${version}.css`}},configureWebpack: {output: { // 輸出重構(gòu) 打包編譯后的文件名稱【模塊名稱.版本號(hào).時(shí)間戳】filename: `[name].${process.env.VUE_APP_Version}.${Timestamp}.js`,chunkFilename: `[name].${process.env.VUE_APP_Version}.${Timestamp}.js`}} }

總結(jié)

以上是生活随笔為你收集整理的vue项目如何解决浏览器缓存问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

vue

vue项目 如何解决浏览器缓存问题

1.什么是瀏覽器緩存

2.瀏覽器緩存類型

3.瀏覽器緩存的優(yōu)勢(shì)與劣勢(shì)

4. 瀏覽器緩存機(jī)制

5.如何清除瀏覽器緩存

總結(jié)

vue项目如何解决浏览器缓存问题