vue項(xiàng)目中禁用瀏覽器緩存配置案例
項(xiàng)目發(fā)布版本會(huì)遇到經(jīng)常需要清理緩存的問題,以下是項(xiàng)目禁用緩存的實(shí)際方法
1.public文件夾中修改 index.html文件meta配置
<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 cli 構(gòu)建配置(針對(duì)vue3以下版本)
在vue.config.js新增配置
const Timestamp = new Date().getTime()
module.exports = {
configureWebpack: {
output: { // 輸出重構(gòu) 打包編譯后的 文件名稱 【模塊名稱.版本號(hào)(可選).時(shí)間戳】
filename: `[name].${Timestamp}.js`,
chunkFilename: `[name].${Timestamp}.js`
},
},
css: {
extract: { // 打包后css文件名稱添加時(shí)間戳
filename: `css/[name].${Timestamp}.css`,
chunkFilename: `css/[name].${Timestamp}.css`
}
},
}
3.Nginx配置
禁用掉nginx緩存，讓瀏覽器每次到服務(wù)器去請(qǐng)求文件，而不是在瀏覽器中讀取緩存文件。
當(dāng)程序調(diào)試好上線后,可以開啟nginx緩存,節(jié)省服務(wù)器的帶寬流量，減少一些請(qǐng)求，降低服務(wù)器的壓力。
在nginx.conf文件里配置html文件默認(rèn)加header 不緩存配置
以下實(shí)際項(xiàng)目中nginx緩存配置
location ~ .*\.(?:htm|html)$ {
add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
}
Nginx靜態(tài)資源緩存設(shè)置 http://www.fzitv.net/article/222620.htm
到此這篇關(guān)于vue項(xiàng)目中禁用瀏覽器緩存配置案例的文章就介紹到這了,更多相關(guān)vue項(xiàng)目中禁用瀏覽器緩存配置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
區(qū)分vue-router的hash和history模式
Vue實(shí)現(xiàn)模糊查詢的簡(jiǎn)單方法實(shí)例
vue單頁(yè)面應(yīng)用打開新窗口顯示跳轉(zhuǎn)頁(yè)面的實(shí)例
如何使用Webpack優(yōu)化Vue項(xiàng)目的打包流程
vue配置代理vue.config.js后不生效的解決(小坑)
Vue項(xiàng)目webpack打包部署到Tomcat刷新報(bào)404錯(cuò)誤問題的解決方案
vue2結(jié)合echarts實(shí)現(xiàn)一個(gè)地圖的效果