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