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