您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“vue項目中禁用瀏覽器緩存的配置步驟”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強。下面就讓小編來帶大家學(xué)習(xí)“vue項目中禁用瀏覽器緩存的配置步驟”吧!
項目發(fā)布版本會遇到經(jīng)常需要清理緩存的問題,以下是項目禁用緩存的實際方法
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)建配置(針對vue3以下版本)
在vue.config.js新增配置
const Timestamp = new Date().getTime() module.exports = { configureWebpack: { output: { // 輸出重構(gòu) 打包編譯后的 文件名稱 【模塊名稱.版本號(可選).時間戳】 filename: `[name].${Timestamp}.js`, chunkFilename: `[name].${Timestamp}.js` }, }, css: { extract: { // 打包后css文件名稱添加時間戳 filename: `css/[name].${Timestamp}.css`, chunkFilename: `css/[name].${Timestamp}.css` } }, }
3.Nginx配置
禁用掉nginx緩存,讓瀏覽器每次到服務(wù)器去請求文件,而不是在瀏覽器中讀取緩存文件。
當(dāng)程序調(diào)試好上線后,可以開啟nginx緩存,節(jié)省服務(wù)器的帶寬流量,減少一些請求,降低服務(wù)器的壓力。
在nginx.conf文件里配置html文件默認(rèn)加header 不緩存配置
以下實際項目中nginx緩存配置
location ~ .*\.(?:htm|html)$ { add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate"; }
Nginx靜態(tài)資源緩存設(shè)置 https://codecat.blog.csdn.net/article/details/117604817
到此,相信大家對“vue項目中禁用瀏覽器緩存的配置步驟”有了更深的了解,不妨來實際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。