vue微前端项目上线遇到刷新后,页面还是没有更新的清空

93 阅读1分钟
  1. 本项目使用的是nginx做转发
  2. 项目使用的是利用微前端把子应用嵌入到主应用 基本知识: 从缓存中读取又分为从内存(from memory cache)中读取还是从磁盘中读取(from disk cache)。
内存中读取之前已经加载过的资源,不请求服务器,页面关闭时,资源就会被内存释放,再次打开相同页面不会出现此类情况
磁盘中读取之前已经加载过的资源,不请求服务器,页面关闭不会被释放,这部分资源存在电脑磁盘里,只有用户手动清除浏览器缓存的时候才会释放

一、打包上传到nginx 配置好的目录

刷新页面发现页面的内容并没有更新 #查看服务器返回的本url下的文件

image.png 发现状态代码写着来自磁盘缓存

在nginx 增加配置,再reload nginx,

这个配置会告诉浏览器不要缓存.html文件,每次请求时都会从服务器获取最新版本。
location ~* \.html$ {
    add_header Cache-Control "no-cache, no-store";
    add_header Access-Control-Allow-Origin $http_origin;

    if ($request_method = OPTIONS) {
        return 204;
    }
 }

二、再次刷新页面,状态码【来自磁盘缓存】消失

1725778703022.jpg

三、总结

在vue项目中,需要把index.html 配置为不缓存,另一种常见的做法是在构建时为每个资源文件(包括HTML)添加一个时间戳或哈希值作为查询参数。这样,即使文件名相同,URL也会因为查询参数的不同而被视为不同的资源,从而绕过缓存