vue項(xiàng)目打包后瀏覽器緩存問題及解決
更新時(shí)間：2023年03月19日 17:05:14 作者：可可愛i
這篇文章主要介紹了vue項(xiàng)目打包后瀏覽器緩存問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue項(xiàng)目打包后瀏覽器緩存
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)前的時(shí)間戳
let timeStamp = new Date().getTime();
module.exports = {
filenameHashing: false, // 打包的時(shí)候不使用hash值.因?yàn)槲覀冇袝r(shí)間戳來確定項(xiàng)目的唯一性了.
configureWebpack: { //重點(diǎn)
output: { // 輸出重構(gòu) 打包編譯后的js文件名稱,添加時(shí)間戳.
filename: `js/js[name].${timeStamp}.js`,
chunkFilename: `js/chunk.[id].${timeStamp}.js`,
}
},
css: { //重點(diǎn).
extract: { // 打包后css文件名稱添加時(shí)間戳
filename: `css/[name].${timeStamp}.css`,
chunkFilename: `css/chunk.[id].${timeStamp}.css`,
}
}
};
可在自己的配置文件中相對(duì)的寫入以上代碼
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é)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue中使用帶隱藏文本信息的圖片、圖片水印的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-04
這篇文章主要為大家詳細(xì)介紹了Vue封裝組件并上傳到npm的相關(guān)教程,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以參考下2024-04-04
nuxt 服務(wù)器渲染動(dòng)態(tài)設(shè)置 title和seo關(guān)鍵字的操作
這篇文章主要介紹了nuxt 服務(wù)器渲染動(dòng)態(tài)設(shè)置 title和seo關(guān)鍵字的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要為大家介紹了Vue模板語法v-bind教程示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-12-12
這篇文章主要給大家介紹了關(guān)于Vue圖片裁剪組件的相關(guān)資料,本文介紹的組件是基于vue-cropper二次封裝,vue-cropper大家應(yīng)該都很熟悉了吧,需要的朋友可以參考下2021-07-07
使用Vue-cli3.0創(chuàng)建的項(xiàng)目 如何發(fā)布npm包
這篇文章主要介紹了使用Vue-cli3.0創(chuàng)建的項(xiàng)目，如何發(fā)布npm包,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-10-10
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)下拉表格組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
本篇文章主要介紹了vue中如何引入jQuery和Bootstrap，詳細(xì)的介紹了引入jQuery和Bootstrap的方法，有興趣的可以了解一下。2017-04-04
這篇文章主要介紹了關(guān)于全局安裝vue-cli遇到的問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
在Vue項(xiàng)目中使用v-if指令控制ECharts圖表顯示時(shí),可能會(huì)遇到圖表無法正常渲染或顯示錯(cuò)誤的問題,下面這篇文章主要介紹了Vue中使用ECharts與v-if的問題和解決方案,需要的朋友可以參考下2024-10-10