vue項(xiàng)目部署自動(dòng)清除緩存方式
清除文件緩存
1.index.html 文件添加 http-equiv(http 響應(yīng)頭)
通過(guò)在head標(biāo)簽中添加meta，當(dāng)瀏覽器訪問(wèn)index.html時(shí)，會(huì)向服務(wù)器重新請(qǐng)求靜態(tài)資源。該方法了解即可，不推薦使用，會(huì)導(dǎo)致用戶每次訪問(wèn)程序都需要重新請(qǐng)求服務(wù)器，所有靜態(tài)資源都無(wú)法使用緩存，浪費(fèi)流量，網(wǎng)絡(luò)壓力大。
// 設(shè)定網(wǎng)頁(yè)的到期時(shí)間，一旦網(wǎng)頁(yè)過(guò)期，必須到服務(wù)器上重新傳輸。 <meta http-equiv="Expires" content="0"> // 設(shè)定禁止瀏覽器從本地機(jī)的緩存中調(diào)閱頁(yè)面內(nèi)容 <meta http-equiv="Pragma" content="no-cache"> // 清除緩存，再次訪問(wèn)這個(gè)網(wǎng)址要重新下載 <meta http-equiv="Cache-control" content="no-cache">
2.給打包的js、css文件添加時(shí)間戳
項(xiàng)目打包時(shí)給js、css文件加上時(shí)間戳，保證輸出的文件名不會(huì)相同，通過(guò) vue.config.js 進(jìn)行配置。
// 獲取當(dāng)前時(shí)間戳
const timeStamp = new Date().getTime()
// 時(shí)間戳配置
module.exports = {
// 打包后的文件輸出路徑
outputDir: 'dist',
configureWebpack: {
// 輸出重構(gòu) 打包編譯后的js文件名稱，添加時(shí)間戳
output: {
filename: `js/[name].${timeStamp}.js`,
chunkFilename: `js/[name].${timeStamp}.js`,
}
},
css: {
// 輸出重構(gòu) 打包編譯后的css文件名稱，添加時(shí)間戳
extract: {
filename: `css/[name].${timeStamp}.css`,
chunkFilename: `css/[name].${timeStamp}.css`,
}
}
}了解：filename： 指列在 entry（入口） 中，打包后輸出的文件的名稱chunkFilename： 指未列在 entry 中，卻又需要被打包出來(lái)的文件的名稱（懶加載的文件）
清除瀏覽器 localStorage 緩存
1、更新package.json中的 version 值，每次打包往上遞增2、main.js中，根據(jù) version 判斷是否進(jìn)行緩存清理
const VUE_APP_VERSION = require('../package.json').version
const vers = window.localStorage.getItem('appVersion')
if(VUE_APP_VERSION != vers){
localStorage.clear()
window.localStorage.setItem('appVersion', VUE_APP_VERSION)
location.reload()
}到此這篇關(guān)于vue項(xiàng)目部署，自動(dòng)清除緩存配置的文章就介紹到這了,更多相關(guān)vue自動(dòng)清除緩存內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue項(xiàng)目實(shí)例中用query傳參如何實(shí)現(xiàn)跳轉(zhuǎn)效果
這篇文章主要介紹了vue項(xiàng)目實(shí)例中用query傳參如何實(shí)現(xiàn)跳轉(zhuǎn)效果，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue父子組件傳值以及單向數(shù)據(jù)流問(wèn)題詳解
大家應(yīng)該都知道父組件可以向子組件通過(guò)屬性形式傳遞參數(shù),傳遞的參數(shù)也可以隨時(shí)隨意修改;但子組件不能修改父組件傳遞過(guò)來(lái)的參數(shù),所以下面這篇文章主要給大家介紹了關(guān)于vue父子組件傳值以及單向數(shù)據(jù)流問(wèn)題的相關(guān)資料,需要的朋友可以參考下2021-09-09
vue.js實(shí)現(xiàn)點(diǎn)擊圖標(biāo)放大離開(kāi)時(shí)縮小的代碼
這篇文章主要介紹了vue.js實(shí)現(xiàn)點(diǎn)擊圖標(biāo)放大離開(kāi)時(shí)縮小，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-01-01
vue中實(shí)現(xiàn)methods一個(gè)方法調(diào)用另外一個(gè)方法
下面小編就為大家分享一篇vue中實(shí)現(xiàn)methods一個(gè)方法調(diào)用另外一個(gè)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
Vue實(shí)現(xiàn)將頁(yè)面區(qū)域?qū)С鰹閜df
文章介紹了兩種將前端頁(yè)面指定區(qū)域?qū)С鰹镻DF的純前端實(shí)現(xiàn)方法,方式一使用jsPDF和html2canvas將特定區(qū)域轉(zhuǎn)化為圖片,再將圖片轉(zhuǎn)化為PDF,適用于小區(qū)域轉(zhuǎn)換,但存在翻頁(yè)時(shí)內(nèi)容拆分的問(wèn)題,方式二使用html2pdf.js,支持自動(dòng)分頁(yè),適用于較大區(qū)域的轉(zhuǎn)換2025-10-10
Vapor Mode是Vue 3.6推出的一個(gè)新的高效渲染模式,它實(shí)現(xiàn)了無(wú)虛擬DOM并大幅度提升性能, 下面就來(lái)詳細(xì)的介紹一下使用Vapor Mode的方法小結(jié),感興趣的可以了解一下2026-05-05
微信的浮窗，大伙應(yīng)該都用過(guò)，當(dāng)我們正在閱讀一篇公眾號(hào)文章時(shí)，突然需要處理微信消息，點(diǎn)擊浮窗，在微信上會(huì)有個(gè)浮標(biāo)，點(diǎn)擊浮標(biāo)可以再次回到文章。今天小編抽空給大家介紹vue 實(shí)現(xiàn)微信浮標(biāo)效果，感興趣的朋友一起看看吧2019-09-09
Vue 3 中使用 OpenLayers 實(shí)時(shí)顯示 zoom
本文介紹了如何在 Vue 3 中使用 OpenLayers 來(lái)獲取地圖的 zoom 值以及四角坐標(biāo)信息,并實(shí)時(shí)更新數(shù)據(jù),這種方式可以用于 GIS 應(yīng)用開(kāi)發(fā),幫助用戶更好地了解當(dāng)前地圖范圍,感興趣的朋友一起看看吧2025-04-04
Vue手動(dòng)埋點(diǎn)設(shè)計(jì)的方法實(shí)例
這篇文章主要給大家介紹了關(guān)于Vue手動(dòng)埋點(diǎn)設(shè)計(jì)的相關(guān)資料,內(nèi)容簡(jiǎn)明扼要并且容易理解,絕對(duì)能使你眼前一亮,需要的朋友可以參考下2022-03-03
這篇文章主要為大家詳細(xì)介紹了vue+rem自定義輪播圖效果，手指觸摸左滑和右滑，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06