vue項(xiàng)目打包后瀏覽器緩存問題及解決
更新時(shí)間：2023年03月19日 17:05:14 作者：可可愛i
這篇文章主要介紹了vue項(xiàng)目打包后瀏覽器緩存問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue項(xiàng)目打包后瀏覽器緩存
1、第一步需要在index.html中添加如下代碼：
<meta http-equiv="pragram" content="no-cache"> <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate"> <meta http-equiv="expires" content="0">
2、第二步需要在vue.config.js中添加如下代碼：
const path = require("path"); // 獲取當(dāng)前的時(shí)間戳
let timeStamp = new Date().getTime();
module.exports = {
filenameHashing: false, // 打包的時(shí)候不使用hash值.因?yàn)槲覀冇袝r(shí)間戳來確定項(xiàng)目的唯一性了.
configureWebpack: { //重點(diǎn)
output: { // 輸出重構(gòu) 打包編譯后的js文件名稱,添加時(shí)間戳.
filename: `js/js[name].${timeStamp}.js`,
chunkFilename: `js/chunk.[id].${timeStamp}.js`,
}
},
css: { //重點(diǎn).
extract: { // 打包后css文件名稱添加時(shí)間戳
filename: `css/[name].${timeStamp}.css`,
chunkFilename: `css/chunk.[id].${timeStamp}.css`,
}
}
};
可在自己的配置文件中相對(duì)的寫入以上代碼
3、需要在nginx中配置不去緩存index.html文件內(nèi)容（nginx.conf中配置）
if ($request_filename ~* ^.*?.(html|htm)$) {
add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
}
vue打包更新后緩存
需要服務(wù)器配置
nginx： 里面cache-control：no-cache，no-store
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
詳解vue中父子組件傳遞參數(shù)props的實(shí)現(xiàn)方式
這篇文章主要給大家介紹了在vue中，父子組件傳遞參數(shù)?props?實(shí)現(xiàn)方式，文章通過代碼示例介紹的非常詳細(xì)，對(duì)我們的學(xué)習(xí)或工作有一定的參考價(jià)值,需要的朋友可以參考下2023-07-07
vuecli+AXdownload下載組件封裝?+css3下載懸浮球動(dòng)畫效果
當(dāng)觸發(fā)下載功能的時(shí)候,會(huì)觸發(fā)一個(gè)下載動(dòng)畫,下載懸浮球會(huì)自動(dòng)彈出,并且閃爍提示有新的下載任務(wù)直到下載任務(wù)完場(chǎng)提示,接下來通過本文介紹vuecli+AXdownload下載組件封裝?+css3下載懸浮球動(dòng)畫效果,需要的朋友可以參考下2024-05-05
這篇文章主要為大家介紹了LogicFlow內(nèi)置插件使用實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
Vue3?pinia管理數(shù)據(jù)的3種方式代碼
在Vue3中Pinia是一個(gè)狀態(tài)管理庫,它提供了一種簡(jiǎn)單而強(qiáng)大的方式來管理應(yīng)用程序的狀態(tài),這篇文章主要給大家介紹了關(guān)于Vue3?pinia管理數(shù)據(jù)的3種方式,需要的朋友可以參考下2024-04-04
將vue項(xiàng)目打包成電腦端應(yīng)用.exe的完整步驟
最近接了個(gè)小活,其中甲方要求把vue項(xiàng)目打包成exe安裝在windows上,其中有也會(huì)出現(xiàn)一些小問題和優(yōu)化,特此記錄,這篇文章主要給大家介紹了關(guān)于將vue項(xiàng)目打包成電腦端應(yīng)用.exe的完整步驟,需要的朋友可以參考下2023-10-10
這篇文章主要為大家詳細(xì)介紹了vue router demo演示代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
今天小編就為大家分享一篇vue2過濾器模糊查詢方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vant IndexBar實(shí)現(xiàn)的城市列表的示例代碼
這篇文章主要介紹了vant IndexBar實(shí)現(xiàn)的城市列表的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要為大家介紹了electron打包中的巨坑解決記錄，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
Vue-cli proxyTable 解決開發(fā)環(huán)境的跨域問題詳解
本篇文章主要介紹了Vue-cli proxyTable 解決開發(fā)環(huán)境的跨域問題詳解，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-05-05