解決nginx服務(wù)器上發(fā)布的新版本代碼總需要清除瀏覽器緩存問題
更新時(shí)間：2024年01月24日 16:21:53 作者：Queen_live
這篇文章主要介紹了解決nginx服務(wù)器上發(fā)布的新版本代碼總需要清除瀏覽器緩存問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
問題場景
- 代碼運(yùn)行環(huán)境：nginx
- 現(xiàn)象：發(fā)布新版本代碼時(shí)瀏覽器總是有上次緩存
- 結(jié)果：頁面顯示混亂、更新的功能還是上個(gè)版本等一系列問題
原因
- 瀏覽器緩存
解決方法
1. 用戶自行清理瀏覽器緩存
- 優(yōu)點(diǎn)：清除瀏覽器緩存后可達(dá)到效果。
- 缺點(diǎn)：影響用戶體驗(yàn)
2. 使用禁用緩存標(biāo)簽，實(shí)現(xiàn)禁用瀏覽器緩存
- 優(yōu)點(diǎn)：可達(dá)到效果。
- 缺點(diǎn)：每次請求頁面都要重新請求，我們還是希望有緩存的
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> <meta http-equiv="Cache" content="no-cache"> <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Expires" content="0" />
3. 為js和css文件添加版本號(hào)
- 優(yōu)點(diǎn)：可達(dá)到效果。
- 缺點(diǎn)：給所有的靜態(tài)資源都添加版本號(hào)參數(shù)，這個(gè)參數(shù)可以是時(shí)間戳或者隨機(jī)數(shù)。
處理方式的代碼如下：
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/plugins/layui-v2.5.5/layui/css/layui.css?v=20200110052406" rel="external nofollow" >
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/style.css?v=20200110052406" rel="external nofollow" >
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/addStyle.css?v=20200110052406" rel="external nofollow" >
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/template/addStyle.css?v=20200110052406" rel="external nofollow" >
4. 修改nginx 配置
（滿足以下條件后有緩存可以修改nginx 配置文件）
背景：
1、使用nginx做代理
2、使用webpack等打包出一個(gè)唯一的入口文件index.html，或者其他方式的入口html文件
3、入口html文件中js已經(jīng)使用hash后綴方式加載
=缺點(diǎn)：需要前端人員會(huì)配置nginx=
location ~ .*\.(htm|html)?$ {
#原來這樣設(shè)置的不管用
#expires -1;
#現(xiàn)在改為，增加緩存
add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
access_log on;
}
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
詳解Nginx服務(wù)器中HTTP Headers相關(guān)的模塊配置使用
這篇文章主要介紹了詳解Nginx服務(wù)器中HTTP Headers相關(guān)的模塊配置使用,包括ngx_http_headers_module與它的增強(qiáng)版ngx_headers_more的配置使用講解,需要的朋友可以參考下2016-01-01
Nginx 平滑升級(jí)的實(shí)現(xiàn)(拒絕服務(wù)漏洞)
本文主要介紹了Nginx 平滑升級(jí)的實(shí)現(xiàn)(拒絕服務(wù)漏洞),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-02-02
如何使用nginx充當(dāng)mysql的負(fù)載均衡器
這篇文章主要介紹了使用nginx充當(dāng)mysql的負(fù)載均衡器過程詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-06-06
angular6+springboot實(shí)現(xiàn)前后分離nginx配置
這篇文章主要介紹了angular6+springboot實(shí)現(xiàn)前后分離nginx配置詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
ngx_lua_waf是一個(gè)基于ngx_lua的web應(yīng)用防火墻。代碼很簡單，開發(fā)初衷主要是使用簡單，高性能和輕量級(jí)。下面我們來看看如何在為nginx安裝waf模塊2016-08-08
Nginx緩存主要是用于減輕后端服務(wù)器的負(fù)載,提高網(wǎng)站并發(fā)量,提升用戶體驗(yàn)度,下面這篇文章主要給大家介紹了關(guān)于如何利用nginx做代理緩存的相關(guān)資料,需要的朋友可以參考下2021-12-12
Nginx配置請求頭攜帶原始請求信息的實(shí)現(xiàn)
本文主要介紹了Nginx配置請求頭攜帶原始請求信息的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-12-12
Nginx 如何部署指定文件夾下的項(xiàng)目(本地測試)
這篇文章主要介紹了Nginx 如何部署指定文件夾下的項(xiàng)目(本地測試),分為配置vue.config.js,指定生成環(huán)境的包,配置路由模式為hash（history模式刷新后,找不到頁面）,本文講解的非常詳細(xì),需要的朋友可以參考下2024-01-01
在一些場景中,我們需要根據(jù)客戶端的IP地址或網(wǎng)段對訪問進(jìn)行控制,在Nginx中針對某些URL只允許特定網(wǎng)段訪問,本文就來介紹一下如何實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下2023-09-09
本文以示例的形式，由淺入深講解Nginx限流相關(guān)配置，是對簡略的官方文檔的積極補(bǔ)充，感興趣的朋友跟隨小編一起看看吧2019-09-09