- 本项目使用的是nginx做转发
- 项目使用的是利用微前端把子应用嵌入到主应用 基本知识: 从缓存中读取又分为从内存(from memory cache)中读取还是从磁盘中读取(from disk cache)。
内存中读取之前已经加载过的资源,不请求服务器,页面关闭时,资源就会被内存释放,再次打开相同页面不会出现此类情况
磁盘中读取之前已经加载过的资源,不请求服务器,页面关闭不会被释放,这部分资源存在电脑磁盘里,只有用户手动清除浏览器缓存的时候才会释放
一、打包上传到nginx 配置好的目录
刷新页面发现页面的内容并没有更新 #查看服务器返回的本url下的文件
发现状态代码写着来自磁盘缓存
在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;
}
}
二、再次刷新页面,状态码【来自磁盘缓存】消失
三、总结
在vue项目中,需要把index.html 配置为不缓存,另一种常见的做法是在构建时为每个资源文件(包括HTML)添加一个时间戳或哈希值作为查询参数。这样,即使文件名相同,URL也会因为查询参数的不同而被视为不同的资源,从而绕过缓存