nginx配置vue项目页面访问缓存而非接口解决办法

于 2023-12-12 14:40:59 发布
阅读量465 收藏 8
点赞数 10
文章标签： nginx
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73762461/article/details/134948902
版权

在配置文件中加入访问后端接口加禁用缓存命令：

location /nxfhkhhx/ {
        add_header Cache-Control "no- cache, no-store, must-revalidate";
        add_header Pragma "no-cache";

        add_header Expires 0;           

}

m0_73762461
关注
  • 10
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue_cli_nginx:vue-cli 创建的项目，部署在 nginx 上的配置（包括配置缓存）
05-13
vue-cli 创建的项目，部署在 nginx 上的配置server { listen 80; server_name xxx.xxx.xxx.xxx; charset utf-8; root /home/xxx/dist/; index index.html; location / { try_files $uri $uri/ @rewrites; # 需要指向...
vue增加强缓存和版本号的实现方法
10-17
总结起来，Vue.js项目中的强缓存和版本号管理是通过服务器配置和Webpack打包过程实现的。正确配置这些策略，可以有效提高用户体验，同时确保应用更新时资源能够及时刷新。通过结合强缓存和协商缓存，我们可以优化...
Vue项目打包部署Nginx配置及前端缓存问题解决
彭世瑜的博客
08-22 1万+
配置如下 其中:/app 是网站根目录 3、缓存问题解决 浏览器缓存分类：html默认当做了静态文件传输，会被浏览器缓存，每次打开都拿不到最新的页面使用Charles抓包发现： 访问网站首页压根没有进行请求，直接从浏览器本地获取了index.html文件。看来浏览器使用了强制缓存策略nginx 添加以下配置，告诉浏览器怎么缓存html文件 参数 说明 Cache-Control: no-cache 协商缓存，只能应用于http 1.1，会返回304(资源无更新) Cache-Contro
解决前端ngnix更新包之后缓存问题（vue）
weixin_48294772的博客
09-06 348
解决前端ngnix更新包之后缓存问题（vue）
Vue | 大坑！！！缓存
GC怪兽的Blog
02-28 1747
今天本来想练习一下slot的（用的是模块化引进组件） 结果一上来，写完就报错！！然后解决了。 但是还是报错！ 然后我新建了一个文件！ 结果还是报错，两个文件都是一样的了！！！ 然后怎样能解决？ 当然是缓存问题呀！！！ delete一下缓存~成功解决 原来是Vue有一个缓存机制！！！ ...
uniapp打包，然后部署到nginx之后，页面有缓存的解决办法
qq_35387299的博客
05-26 1639
uniapp项目中，在根目录中找到vue.config.js，如果没有则新建一个，然后在该文件下添加以下内容：// 由于这种方式的打包，会导致编译生成微信小程序（只验证了微信小程序）无法正常使用，所以必须分开 let filePath = './static/js/' let Timestamp = new Date() . getTime() module . exports = {
vue项目打包后浏览器缓存问题及解决
超级罗伯特的博客
07-10 8875
项目上线后，针对使用频繁的功能模块，比如请假，加班的新增以及编辑内容涉及到数据逻辑的处理的时候，你会发现浏览器缓存的问题非常的严峻，总不能一直告诉用户要清理缓存吧，这个时候前台开发人员就需要即使做优化，一个通常的处理的办法就通过时间戳解决。index.html文件在服务器端可能被缓存，css，js同样如此，以下是一种解决方案。第三步：修改nginx（nginx.conf中配置）中配置不缓存index文件的内容。第二步，修改vue.config.js文件。配置就完毕了，重新打包部署服务器即可。
详解vue通过NGINX部署在子目录或者二级目录实践
10-18
在实际项目中，有时我们需要将Vue应用部署到服务器的子目录或二级目录下，而不是作为顶级域名的直接入口。这时，我们可以利用NGINX的反向代理功能来实现这一需求。NGINX是一款高性能的HTTP和反向代理服务器，能够...
Nginx配置http转https以及https访问http静态资源.docx
08-25
Nginx配置http转https以及https访问http静态资源需要配置SSL证书、SSL会话缓存、rewrite规则、location块、add_header指令、proxy_pass指令等。通过正确的配置，Nginx可以提供安全、稳定、高性能的Web服务器服务。
vue单页面打包文件大？首次加载慢？nginx带你飞，从7.5M到1.3M蜕变过程(推荐)
08-28
从标题和描述中，我们可以了解到本文的主题是如何解决 Vue 单页面打包文件太大、首次加载慢的问题，并且使用 Nginx 实现从 7.5M 到 1.3M 的优化过程。 首先，让我们了解一下 Vue 单页面应用程序的打包文件为什么会...
vue项目部署以及解决代码部署后浏览器存在缓存问题
汉堡请不要欺负面条
10-29 6926
开发完的vue项目，需要部署到Nginx/Tomcat服务器上运行，作为一个前端小白，刚接触vue不久，研究了一番，于是写下这篇文章，记录下来便于今后部署。 1.router(history)模式vue项目部署到nginx 1）修改router模式为history（默认为hash） const router = new VueRouter({ routes, mode: 'history' }); 对路由模式不清楚的小伙伴，可以看这篇vue-router路由模式详解 2）修改config
vueCli3.0 前端打包项目部署nginx后去除缓存
IT博客技术分享
02-22 3835
由于vue脚手架每次打包时，都会将打出的静态资源文件名加个哈希后缀，且index.html中引入时也加了对应的哈希后缀，所以每个版本的静态资源都是全新的，不用担心因升级导致的缓存问题。让静态资源有缓存好办，问题在于怎么只让index.html不缓存。不推荐使用的原因是：升级时缓存问题倒解决了，但直接导致了用户每次访问你的程序时都要重新请求服务器，所有的静态资源都无法用缓存了，浪费流量，网络压力变大。vue项目每次打包上线后，浏览器需要强制刷新浏览器才能去除缓存，更新最新的版本，这样做的话，肯定不是很合理。
vue nginx项目配置 处理缓存
dongheng123的博客
04-18 4233
# 增加不缓存index.html location = /index.html { root /usr/local/test-frontend/clientPlatform/dist; add_header Cache-Control "no-cache, no-store"; } ``` root /usr/local/test-frontend/clientPlatform/dist; 这个设置 ..
nginx服务器上发布的新版本代码总需要清除浏览器缓存问题
weixin_45748897的博客
06-22 5321
前端发布新代码后的浏览器缓存问题问题场景原因解决方法 问题场景 代码运行环境：nginx 现象：发布新版本代码时浏览器总是有上次缓存 结果：页面显示混乱、更新的功能还是上个版本等一系列问题 原因 浏览器缓存 解决方法 1. 用户自行清理浏览器缓存。 优点：清除浏览器缓存后可达到效果。 缺点：影响用户体验 2. 使用禁用缓存标签，实现禁用浏览器缓存。 优点：可达到效果。 缺点：每次请求页面都要重新请求，我们还是希望有缓存的 <meta http-equiv="Cache-Control" con
浏览器缓存常用策略及Vue应用的Nginx缓存设置
半路雨歌
08-08 4499
最近一次移动端Vue应用的上线，导致某些用户使用某些功能时出现问题，经主动清空缓存后恢复。有时候清空微信应用的存储空间缓存仍不能解决问题，此时安卓机可借助微信TBS调试工具 http://debugx5.qq.com （微信中打开页面，勾选最下面四个选项清除缓存），但该工具目前只支持安卓手机，苹果机就比较麻烦了。为了找到问题的本质，从根本上避免问题，最近浏览了一些文章，其中有一篇对浏览器缓存的分析及在Nginx中对应的处理策略总结的比较好，这里分享给大家。 原文标题：http常用缓存策略及vue-cli单
vue SPA项目，浏览器和nginx反向代理缓存问题解决实方案
weixin_33781606的博客
12-10 2545
问题背景a.浏览器端在每次发布新的版本时候，总会出现因为单页面项目中index.html文件（200 ok from disk cache 不发送请求，直接取用了本地磁盘缓存）和服务端版本不一致的问题，导致用户不能及时更新，需要通过手动刷新来强制从服务端更新文件。b.补充一下，服务端和浏览器之间架构。三级缓存问题上述，我们看到浏览器没有发出请求直接从磁盘中取出index.html文件，这其实是二级...
h5项目（特别是vue）缓存严重的解决方案，配合nginx
w36680130的博客
01-20 768
h5项目（特别是vue）缓存严重的解决方案，配合nginx
【Vue】Vue2.0页面缓存和不缓存的方法，以及watch监听会遇到的问题
热门推荐
时间飞逝的博客
03-26 1万+
vue2.0页面缓存和不缓存的方法，以及watch监听会遇到的问题
vue项目实现缓存的最佳方案
weixin_30555753的博客
07-10 4789
需求 在开发vue的项目中有遇到了这样一个需求：一个视频列表页面，展示视频名称和是否收藏，点击进去某一项观看，可以收藏或者取消收藏，返回的时候需要记住列表页面的页码等状态，同时这条视频的收藏状态也需要更新, 但是从其他页面进来视频列表页面的时候不缓存这个页面，也就是进入的时候是视频列表页面的第一页 一句话总结一下： pageAList->pageADetail->pageAList,...
vue 清除页面缓存 nginx
最新发布
01-16
Vue.js 和 Nginx 通常一起使用，用于构建和分发单页应用程序 (SPA)。Vue.js 是一种流行的 JavaScript 框架，用于构建用户界面。Nginx 是一种流行的 Web 服务器软件，通常用于反向代理和缓存。 要清除 Vue.js 页面的缓存，您可以使用 Nginx 的缓存控制功能。以下是一些步骤和配置示例，可以帮助您实现这一点： 1. 配置 Nginx 作为反向代理服务器：确保您的 Nginx 配置文件正确地指向您的 Vue.js 应用程序的静态资源。 2. 配置 Nginx 的缓存控制：在 Nginx 配置文件中，您可以设置适当的指令来控制缓存。例如，您可以使用 `proxy_cache_path` 指令指定一个用于缓存 Vue.js 页面的目录。接下来，您可以使用 `proxy_cache` 指令启用缓存，并使用 `proxy_cache_key` 指令生成用于缓存引用的密钥。 3. 使用合适的缓存控制指令：Nginx 提供了一些缓存控制指令，如 `proxy_cache_use_stale`、`proxy_cache_key`、`proxy_cache_revalidate` 等，这些可以帮助您控制如何处理缓存失效的情况。根据您的需求，将这些指令添加到适当的位置。 4. 设置合适的过期时间：在缓存控制指令中，您还可以设置适当的过期时间，以避免客户端长期持有过时的缓存副本。 5. 测试和调试：在配置更改后，请确保重新加载 Nginx 配置文件并测试您的应用程序以确保缓存清除功能正常工作。 请注意，清除 Vue.js 页面的缓存可能还涉及其他因素，如浏览器的缓存控制。在使用上述配置时，请确保考虑所有相关的缓存控制机制。 总的来说，Vue.js 和 Nginx 可以很好地协同工作，通过适当的配置来清除页面缓存。不过，具体的配置可能会因您的环境和需求而有所不同。建议参考 Nginx 的官方文档和相关资源，以获取更详细的信息和示例配置。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值