nginx 部署前端项目,不缓存html文件,项目发版后,不用手动刷新页面

Nginx 配置页面请求不缓存的方法 在Web开发中,缓存是提升网站性能的重要手段,但对于某些敏感页面(如登录页面、用户个人信息页面等),缓存可能会导致安全风险或数据不一致问题。因此,合理配置Nginx以确保某些页面不被缓存是非常必要的。通过合理配置 Nginx 的 HTTP 响应头,可以有效控制页面缓存行为,从而保护敏感信息、确保数据实时性并满足安全合规要求。本文介绍了全局禁止缓存、针对特定路径禁止缓存以及针对静态文件禁止缓存的配置方法,并提供了验证配置是否生效的方式。以下是通过 Nginx 配置禁止页面缓存的具体方法。 阅读详情

nginx 部署前端项目,不缓存html文件,项目发版后,不用手动刷新页面

location / {

 expires 1h;
 root /home/test/vue/dist/;
 index index.html index.htm;

 if ($request_filename ~* .*\.(htm|html)$)  ## 配置页面不缓存
 {
     add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
 }

}

当nginx设置了expires后,例如设置为:expires 10d; 那么,所在的location或if的内容,用户在10天内请求的时候,都只会访问浏览器中的缓存,而不会去请求nginx

配置HTML文件不缓存后,每次更新项目,会重新请求页面,前端打包后,在打包工具会自动在文件名上加时间戳、哈希值,这样一发新版时,只要客户端请求了新版的html,里面引用的js/css/jpg等都已经换了路径,也就不会在使用缓存了。

以上nginx配置在实际操作的过程中表现:

1、当用户在系统当中,这时项目发版,用户不会拿到js校验,不去渲染页面相关的改动。比如说:前端只改了js的校验问题,和不会引起整个页面重绘的更改(如:input加一个placeholder),这种情况当用户在系统当中,项目发版后,不刷新页面,用户就拿不到最新更改后的版本。
2、当关闭浏览器,重新打开浏览器登录;用户可以拿到最新更改后的版本。
3、当用户退出登录再次登录时,用户可以拿到最新更改后的版本。
vue 部署上线清除浏览器缓存 vue 部署上线清除浏览器缓存   本文借鉴https://blog.csdn.net/weixin_43299180/article/details/116271209   vue 项目打包上线之后,每一次都会有浏览器缓存问题,需要手动的清除缓存。这样用户体验非常不好,所以我们在打包部署的时候需要尽量避免浏览器的缓存。下面是我的解决方案: 一、修改根目录index.html 在 head 里面添加下面代码 <meta http-equiv="pragram" content="no-cache"&g 阅读详情

相关推荐

Nginx控制前端静态资源不缓存

背景 项目中使用Nginx代理前端代码,每次前端代码修改完成后,浏览器有时候并不会生效。 原因是很多浏览器做了缓存,导致没有使用最新的前端代码。 解决 通过HTTP Header中的Cache-control字段(no-cache)来控制是否开启缓存。 相关可选项如下: no-cache:客户端可以缓存,但是每次使用缓存资源都必须发请求验证其有效性。如果没有变化返回304,如果发生变化,那理论上就是200。 no-store:禁止缓存,不使用任何缓存 修改前的配置: # 原有静态资源配置

甘蓝的专栏 7137

Nginx配置不缓存html

Nginx配置不缓存html文件

weixin_42202992的博客 4437

优化 Nginx 配置以实现 JavaScript 和 CSS 的不缓存

然而,由于浏览器的缓存机制,当我们更新 JavaScript 或 CSS 文件时,浏览器可能会继续使用旧的缓存文件,导致用户无法看到最新的更改。现在,当用户访问你的网站时,Nginx 将发送适当的响应标头,告诉浏览器不要缓存 JavaScript 和 CSS 文件。请注意,上述配置是基于简单的 Nginx 配置,实际的配置可能因服务器环境和需求而有所不同。通过上述配置,你可以确保用户在访问你的网站时,始终获取最新的 JavaScript 和 CSS 文件,从而提供更好的用户体验。块,具体取决于你的配置。

2301_79330511的博客 1049

nginx配置不缓存html

现在浏览器或者系统访问网页都会有自己的一套缓存机制,这就可能会导致前端代码已经更新了,但是用户还是访问了之前的缓存。 这里介绍下用nginx处理这个问题的方法,这里配置html和htm文件不缓存 server { listen 80; server_name test.exmaple.cn; location / { if ($request_filename ~* .*\.(?:htm|html)$) ## 配置页面不缓存html和htm结尾的文件

漠效的博客 4319

前端发版后 CDN 缓存不更新排查与最佳实践

前端项目发版后,测试反馈"我这边看到的还是旧版本",但你本地刷新是新的。换个浏览器试,Safari 是新的,Chrome 是旧的。这种问题 90% 是 CDN 缓存导致的。本文以阿里云 CDN 为例,也适用于 AWS CloudFront、Azure CDN 等,原理相同。场景操作紧急修复CDN 控制台/CLI 刷新缓存根本解决index.html 设为不缓存,带 hash 的静态资源长缓存长期方案CI/CD 流水线集成自动刷新入口文件不缓存,静态资源靠 hash 版本控制。

探索云原生与智能化驱动下的安全运维新范式。关注DevSecOps、可观测性、AIOps等前沿领域,与您共赴技术前沿。 442

DCDC开关节点SW的Layout抉择:打孔换层与EMI共模辐射的权衡

本文深入探讨了DCDC转换器中开关节点SW的Layout设计对EMI共模辐射的影响。通过分析SW节点的EMI辐射机制、打孔换层对输入环路的影响以及铜皮面积与共模辐射的量化关系,提出了工程实践中的权衡策略和优化方法,帮助工程师在设计中平衡EMI性能和电路效率。

weixin_29722783的博客 246

前端发版后实现提醒用刷新页面策略

前端无感更新提醒方案 本文针对SPA应用发版后用户未刷新的问题,提出两种轻量级解决方案: 基于HTML Hash轮询的原生JS方案: 通过定时获取index.html并比对script hash检测更新 实现防抖锁、CDN抖动防护和会话级打扰拦截等健壮性机制 代码简洁,无需后端改造,仅需几十行JS 插件化方案@plugin-web-update-notification: 适用于Vite/Webpack项目 自动生成版本文件,零业务代码侵入 可配置轮询间隔和UI提示样式 关键点: 必须禁用index.htm

尽日寻春不见春,芒鞋踏遍陇头云。归来笑拈梅花嗅,春在枝头已十分。 485

数字后端设计实现 | 数字后端PR工具Innovus中如何创建不同高度的row?

数字IC后端设计实现之innovus中如何创建不同高度的row?

weixin_37584728的博客 3163

解决Nginx部署Vue项目刷新页面404问题

摘要: Vue等SPA应用部署在Nginx时,刷新子路由会出现404错误,因为Nginx直接查找对应文件路径而非返回index.html。解决方案包括: 修改Nginx配置(推荐):添加try_files $uri $uri/ /index.html,将所有请求重定向到前端路由; 启用Vue Router的history模式; 改用hash模式(URL含#,不推荐)。 需确保静态资源路径正确,配置后执行nginx -t验证并重载服务。若项目非根路径部署,需同步调整Vue Router的base选项。

lsk0909的博客 2822

springboot源码 红色J_通达信副图指标源码之,出手就赢

今天跟大家分享一个通达信副图指标源码,本指标没有未来函数,因为本指标没有卖点提示,所以本指标需配合主图指标使用效果会更好,简单易懂,很容易明白,所以就不过多介绍使用方法了,以下是指标的贴图。风险提示!股市有风险买卖需谨慎,本指标只做参考建议,不做买卖交易结果,自己要对自己交易结果的盈亏负责,以下是指标的源码。VAR2:=REF(LOW,1);VAR3:=SMA(ABS(LOW-VAR2),3,1)...

weixin_39859909的博客 2848

在thinkBook16的win11基础上安装ubuntu22.04

背景:联想ThinkBook16 pro 32G/512G,系统盘已安装Win11,加装一条M.2-2T固态,想在2T上分一个300GB的EXT4分区,然后把ubuntu22.04安装在该分区上,并实现Win11+Linux多系统共存。 目标:实现多磁盘下分区管理的简化,优化掉一些不必要的多余的维护性质的分区。

QzmAIoT 4004

Vue项目发布后浏览器缓存问题解决

Vue项目发布后浏览器缓存问题解决 场景:前端vue网站项目使用wepack打包后进行部署,但是用户浏览器访问网站时加载了缓存,导致没有及时更新。  清除 Vue 缓存主要涉及到浏览器缓存和 Vue 应用的缓存。 1、配置public/index.html; 2、可以通过刷新页面强制清除缓存; 3、通过更改文件名或添加版本号来避免缓存; 4、使用 Vue 的内置方法清除缓存; 5、通过配置 Webpack 来避免缓存; 6、配置nginx不缓存index.html。

muzidigbig的博客 9453

JY02无刷电机驱动芯片的硬件设计与调试实战

本文详细介绍了JY02无刷电机驱动芯片的硬件设计与调试实战。重点解析了其外置MOSFET的设计优势,提供了从电源滤波、功率MOSFET选型到电流采样保护的核心电路设计指南。文章还分享了安全上电、动态测试及常见问题排查的完整调试流程,并探讨了开关优化、闭环测速等性能提升技巧,帮助开发者构建稳定高效的无刷电机驱动系统。

weixin_29193359的博客 366

什么?2025年了发版后还要手动清浏览器缓存?

Web 应用的缓存问题,看似玄学,实则逻辑清晰。其根本在于HTTP 响应头是控制缓存的唯一权威。通过在 Nginx 层实施精细化的缓存策略——让入口 HTML 永不缓存,让带 Hash 的静态资源永久缓存——我们不仅能从根源上解决用户无法看到更新的问题,还能最大化地利用缓存来提升应用性能。现在,是时候去检查一下你的 Nginx 配置了。告别“请清缓存”,让每一次发布都如丝般顺滑。

java_beautiful的博客 757

SAP SLT REODPS_REPL API 的使用介绍

本文聚焦 SAP 数据复制生态中的 RODPS_REPL(常被误写为 REODPS_REPL),解析其作为 ODP(Operational Data Provisioning)标准接口的核心功能与应用场景。RODPS_REPL 是 SAP 提供的 ABAP 接口集合,支持从 ODP 上下文(如 ODP_SAPI、ODP_CDS)执行初始化装载和增量捕获,被 SAP BW、Datasphere 及第三方工具(如 Azure Data Factory、Qlik Replicate)广泛调用。 关键要点: 核心对

2007 年 ~ 2025 年,深耕 SAP 技术 18 年 228

iStoreOS等软路由插件卸载的残留?分享一款软路由高级卸载工具,自定义卸载,轻松解决卸载残留问题

iStoreOS用户看过来!👀 还在被插件包残留困扰吗?本文分享一款“高级卸载”的插件,助你深度清理iStoreOS系统,彻底解决软件卸载不净的痛点,告别频繁恢复出厂设置的烦恼!🚀

XiaoqiangClub的博客 1546

前端发版缓存全链路:入口 HTML 不缓存与哈希资源长缓存

浏览器缓存是 Web 性能优化与部署稳定的基础机制,核心分为强缓存与协商缓存:前者通过 Cache-Control 的 max-age 直接复用本地副本,后者借助 ETag/Last-Modified 回源校验。理解这套原理,能显著降低带宽压力、提升首屏速度,但若入口 HTML 与静态资源配置失当,发版后用户可能拿到旧页面甚至白屏。常见场景包括后台管理系统、App 内嵌 H5、多端 WebView 以及 CDN 加速的静态站点。工程实践中,通常让入口 HTML 走 no-cache、带内容哈希的静态资源走长

weixin_42697475的博客 226

Probability and Statistics - 4th edition

Probability and Statistics - 4th edition

服务端部署前端页面,浏览器客户端缓存问题分析

项目已更新Nginx的前端页面文件,客户端访问服务端页面时,仍然访问不到更新的文件

lgw2015 1121

lwip-2.0.3

lwip是瑞典计算机科学院(SICS)的Adam Dunkels 开发的一个小型开源的TCP/IP协议栈。实现的重点是在保持TCP协议主要功能的基础上减少对RAM 的占用。

Camera2Demo

在Camera2 的基础上进行封装,使得Camera2一堆初始化逻辑与Activity分离,降低耦合度,完成预览拍照并保存的操作

nginx不缓存html页面耗性能,nginx 部署前端项目,不缓存html文件,项目更新,不用手动刷新页面...

location /xxxx{gzip on;gzip_min_length 1k;#gzip_buffers 4 16k;gzip_http_version 1.1;gzip_comp_level 4;gzip_types text/plain application/javascript application/x-javascript text/css application/xml tex...

weixin_31328555的博客 657

IDEA的使用指南

IDEA基于java的使用手册,可以最快速的上手,在使用中不断的丰富自己的使用技巧.

为什么前端项目部署需要 nginx 或 Apache?

摘要: 前端项目部署需要Web服务器(如Nginx/Apache)的核心原因是浏览器无法直接运行本地文件。前端资源(HTML/JS/CSS等)必须通过HTTP协议访问,否则会遇到路径错误、路由失效、CORS限制等问题。Web服务器提供关键功能:静态文件托管、SPA路由兜底(避免404)、性能优化(压缩/缓存)、HTTPS支持及API反向代理。相比之下,直接打开文件或使用Node开发服务器均不适合生产环境。典型部署方案包括Nginx配置、Docker多阶段构建或Apache路由重写,确保前端项目高效安全地运行

尽日寻春不见春,芒鞋踏遍陇头云。归来笑拈梅花嗅,春在枝头已十分。 1326

vueCli3.0 前端打包项目部署nginx后去除缓存

由于vue脚手架每次打包时,都会将打出的静态资源文件名加个哈希后缀,且index.html中引入时也加了对应的哈希后缀,所以每个版本的静态资源都是全新的,不用担心因升级导致的缓存问题。让静态资源有缓存好办,问题在于怎么只让index.html不缓存。不推荐使用的原因是:升级时缓存问题倒解决了,但直接导致了用户每次访问你的程序时都要重新请求服务器,所有的静态资源都无法用缓存了,浪费流量,网络压力变大。vue项目每次打包上线后,浏览器需要强制刷新浏览器才能去除缓存,更新最新的版本,这样做的话,肯定不是很合理。

IT博客技术分享 5104

Nginx 部署前端项目实战指南

本文介绍了如何利用Nginx部署Vue等前端项目并实现API代理转发。主要内容包括:1) 前端打包上传至服务器;2) Nginx基础配置实现静态资源访问;3) 解决单页应用刷新404问题的try_files配置;4) 通过proxy_pass实现API反向代理,并详细解释了斜杠用法的差异;5) 性能优化措施如Gzip压缩和缓存策略。文章提供了完整的Nginx配置文件示例,涵盖静态资源服务、路由处理、API代理等核心功能,适用于前后端分离项目的生产环境部署。

rmysjm的博客 1451

版本更新后不缓存html文件

导读 很长时间以来,项目一直设置为缓存所有的文件,因此遇到一个代码版本更新浏览器刷新失效的问题。通常,我们打包时(采用webpack方案)输出时会采用contentHash来保证更新代码后相关的js、css文件发生变更。但我们可能忽略了一个问题:js、css文件名发生改变浏览器就一定会加载吗?答案当然是否定的,让我们研究下如何解决。 知识提示 ❝ 为了更好地理解一下文章,你需要了解以下知识;如已了解可跳过。 ❞ webpack output浏览器缓存机制设置html的meta缓存nginx基础 使用con

weixin_42470796的博客 3501

VUE前端应用部署页面访问404问题

VUE前端应用部署页面访问404问题;页面缓存问题

qq_35120986的博客 1万+
上一篇: Vue开发规范细节
下一篇: vue自定义指令-对输入框数字的限制,输入框的数字前面不能输入多余的0,例如00123, 00.12类型的数字
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值