vue項目中禁用瀏覽器緩存配置案例
項目發佈版本會遇到經常需要清理緩存的問題,以下是項目禁用緩存的實際方法
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 構建配置(針對vue3以下版本)
在vue.config.js新增配置
const Timestamp = new Date().getTime() module.exports = { configureWebpack: { output: { // 輸出重構 打包編譯後的 文件名稱 【模塊名稱.版本號(可選).時間戳】 filename: `[name].${Timestamp}.js`, chunkFilename: `[name].${Timestamp}.js` }, }, css: { extract: { // 打包後css文件名稱添加時間戳 filename: `css/[name].${Timestamp}.css`, chunkFilename: `css/[name].${Timestamp}.css` } }, }
3.Nginx配置
禁用掉nginx緩存,讓瀏覽器每次到服務器去請求文件,而不是在瀏覽器中讀取緩存文件。
當程序調試好上線後,可以開啟nginx緩存,節省服務器的帶寬流量,減少一些請求,降低服務器的壓力。
在nginx.conf文件裡配置html文件默認加header 不緩存配置
以下實際項目中nginx緩存配置
location ~ .*\.(?:htm|html)$ { add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate"; }
Nginx靜態資源緩存設置 https://www.jb51.net/article/222620.htm
到此這篇關於vue項目中禁用瀏覽器緩存配置案例的文章就介紹到這瞭,更多相關vue項目中禁用瀏覽器緩存配置內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!