vue項(xiàng)目部署自動(dòng)清除緩存方式
清除文件緩存
1.index.html 文件添加 http-equiv(http 響應(yīng)頭)
通過在head標(biāo)簽中添加meta，當(dāng)瀏覽器訪問index.html時(shí)，會(huì)向服務(wù)器重新請(qǐng)求靜態(tài)資源。該方法了解即可，不推薦使用，會(huì)導(dǎo)致用戶每次訪問程序都需要重新請(qǐng)求服務(wù)器，所有靜態(tài)資源都無法使用緩存，浪費(fèi)流量，網(wǎng)絡(luò)壓力大。
// 設(shè)定網(wǎng)頁的到期時(shí)間，一旦網(wǎng)頁過期，必須到服務(wù)器上重新傳輸。 <meta http-equiv="Expires" content="0"> // 設(shè)定禁止瀏覽器從本地機(jī)的緩存中調(diào)閱頁面內(nèi)容 <meta http-equiv="Pragma" content="no-cache"> // 清除緩存，再次訪問這個(gè)網(wǎng)址要重新下載 <meta http-equiv="Cache-control" content="no-cache">
2.給打包的js、css文件添加時(shí)間戳
項(xiàng)目打包時(shí)給js、css文件加上時(shí)間戳，保證輸出的文件名不會(huì)相同，通過 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 中，卻又需要被打包出來的文件的名稱（懶加載的文件）
清除瀏覽器 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)文章
vue3.0 的 Composition API 的使用示例
這篇文章主要介紹了vue3.0 的 Composition API 的使用示例，幫助大家更好的理解和學(xué)習(xí)vue，感興趣的朋友可以了解下2020-10-10
vue-router二級(jí)導(dǎo)航切換路由及高亮顯示的實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于vue-router二級(jí)導(dǎo)航切換路由及高亮顯示的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
vue項(xiàng)目通過a標(biāo)簽下載圖片至zip包的示例代碼
在vue項(xiàng)目中,將圖片下載可使用流的形式,下載成單個(gè)圖片,或者將多個(gè)圖片下載至zip包,本文就是介紹使用a標(biāo)簽下載圖片的用法,文中有詳細(xì)的代碼示例供大家參考,具有一定的參考價(jià)值,需要的朋友可以參考下2023-10-10
Vite+Electron快速構(gòu)建VUE3桌面應(yīng)用的實(shí)現(xiàn)
本文主要介紹了Vite+Electron快速構(gòu)建VUE3桌面應(yīng)用的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要介紹了vue el-upload上傳文件的示例代碼，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
下面小編就為大家分享一篇解決vue build打包之后首頁白屏的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要給大家介紹了關(guān)于vue3使用canvas的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue3具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-04-04
一文詳解WebStorm如何調(diào)試Vue項(xiàng)目
這篇文章主要介紹了如何使用WebStorm進(jìn)行斷點(diǎn)調(diào)試,包括配置、啟動(dòng)本地應(yīng)用程序、設(shè)置斷點(diǎn)以及使用調(diào)試工具等步驟,文中通過圖文及代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-02-02
手勢鎖是常見的一種手機(jī)解鎖方式，本文主要介紹了vue封裝一個(gè)圖案手勢鎖組件，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
在Vue3中生成動(dòng)態(tài)的word文檔的示例代碼
這篇文章主要介紹了如何在 Vue 3 中生成動(dòng)態(tài)的 Word 文檔,在開發(fā)過程中遇到一個(gè)需求,動(dòng)態(tài)生成一個(gè)word報(bào)表,當(dāng)時(shí)考慮了是前端做還是后端做的問題,最后發(fā)現(xiàn)兩個(gè)解決需求的方法都大差不差,但考慮到前端少發(fā)一個(gè)請(qǐng)求,就此使用的前端來解決,需要的朋友可以參考下2024-09-09