vue項(xiàng)目中禁用瀏覽器緩存配置案例
項(xiàng)目發(fā)布版本會(huì)遇到經(jīng)常需要清理緩存的問(wèn)題,以下是項(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)試好上線后,可以開(kāi)啟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.dbjr.com.cn/article/222620.htm
到此這篇關(guān)于vue項(xiàng)目中禁用瀏覽器緩存配置案例的文章就介紹到這了,更多相關(guān)vue項(xiàng)目中禁用瀏覽器緩存配置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue配置文件自動(dòng)生成路由和菜單實(shí)例代碼
因?yàn)椴煌挠脩粲胁煌臋?quán)限,能訪問(wèn)的頁(yè)面是不一樣的,所以我們?cè)趯?xiě)后臺(tái)管理系統(tǒng)時(shí)就會(huì)遇過(guò)這樣的需求：根據(jù)后臺(tái)數(shù)據(jù)動(dòng)態(tài)添加路由和菜單，這篇文章主要給大家介紹了關(guān)于vue配置文件自動(dòng)生成路由和菜單的相關(guān)資料,需要的朋友可以參考下2021-08-08
vue 解決報(bào)錯(cuò)問(wèn)題小結(jié)
最近入門vue,用字節(jié)跳動(dòng)的arco初始化一個(gè)項(xiàng)目的時(shí)候報(bào)錯(cuò)自己解決后沒(méi)來(lái)的及截圖,從別人那拷貝個(gè)網(wǎng)圖把,是一樣的報(bào)錯(cuò),本文給大家分享vue 解決報(bào)錯(cuò)問(wèn)題小結(jié),感興趣的朋友一起看看吧2023-09-09
Vue中的v-model，v-bind，v-on的區(qū)別解析
vue.js是一套構(gòu)建用戶界面的框架，只關(guān)注視圖層，它不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目整合，vue.js有配套的第三方類庫(kù)，可以整合起來(lái)做大型項(xiàng)目的開(kāi)發(fā)，這篇文章主要介紹了v-model，v-bind，v-on的區(qū)別,需要的朋友可以參考下2022-12-12
淺談Vue.js 1.x 和 2.x 實(shí)例的生命周期
下面小編就為大家?guī)?lái)一篇淺談Vue.js 1.x 和 2.x 實(shí)例的生命周期。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
Vue.js?rules校驗(yàn)規(guī)則舉例詳解
Vue表單校驗(yàn)規(guī)則（rules）是一種用于驗(yàn)證表單數(shù)據(jù)的對(duì)象,它通常用于Vue.js框架中的表單組件中,可以在表單提交前進(jìn)行數(shù)據(jù)驗(yàn)證,這篇文章主要給大家介紹了關(guān)于Vue.js?rules校驗(yàn)規(guī)則的相關(guān)資料,需要的朋友可以參考下2024-02-02
vue?批量自動(dòng)引入并注冊(cè)組件或路由實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了vue?批量自動(dòng)引入并注冊(cè)組件或路由實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
vue中如何給el-table-column添加指定列的點(diǎn)擊事件
elementui中提供了點(diǎn)擊行處理事件,下面這篇文章主要給大家介紹了關(guān)于vue中如何給el-table-column添加指定列的點(diǎn)擊事件,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
這篇文章主要介紹了詳解vue移動(dòng)端項(xiàng)目代碼拆分記錄，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03
Vue2 配置 Axios api 接口調(diào)用文件的方法
本篇文章主要介紹了Vue2 配置 Axios api 接口調(diào)用文件的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
vue中$set的使用(結(jié)合在實(shí)際應(yīng)用中遇到的坑)
這篇文章主要介紹了vue中$set的使用(結(jié)合在實(shí)際應(yīng)用中遇到的坑),小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07