目标:主要为了实现在客户端的浏览器访问BS项目时 项目更新后 只需要刷新页面获取新内容 而不是要先清除浏览器缓存在去重新登录系统
实现: 在nginx.conf中配置那些文件需要强缓存 那些文件需要不需要缓存 以达到项目更新后 浏览器刷新时不请求缓存直接请求服务器
hash值:
通过判断hash值 判断文件是否发生了变化 etag是一种hash值 可以判断文件内容是否发生了变化
- 当浏览器去服务器请求资源的时候,会带上服务器上次返回的etag值.服务器根据这个etag值和当前资源的etag值进行对比.如果一致说明文件没有变动,返回304状态码,如果不一致说明有变动返回200状态码.
大概两种项目文件:
项目文件分为两种
一种是静态资源文件 一般不会变化 所以这些文件 我们直接设置他为4天内的强缓存 (只要访问一定是访问本地缓存)
一种是除了静态资源的项目代码等 这种文件通过hash值判断 没有变化则不请求 变化了则直接请求服务器而不是本地缓存
具体实现方式:
在server{}代码块中使用正则表达式判断文件类型 静态文件则配置为4天强缓存 非静态文件配置为不缓存
转载来源:Nginx配置浏览器缓存_随风浅入画的博客-CSDN博客_nginx设置浏览器缓存
nginx.conf文件内容如下
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
user nginx;
worker_processes auto;
# set open fd limit to 30000
worker_rlimit_nofile 30000;
error_log /var/log/nginx/error.log notice;
pid /var/run/nginx.pid;
events {
worker_connections 1024;
}
http {
include /etc/nginx/mime.types;
default_type application/octet-stream;
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
sendfile on;
#tcp_nopush on;
keepalive_timeout 65;
#gzip on;
# 开启gzip
gzip on;
# 开启gzip_static
# gzip_static 开启后可能会报错,需要安装相应的模块, 具体安装方式可以自行查询
# 只有这个开启,vue文件打包的.gz文件才会有效果,否则不需要开启gzip进行打包
gzip_static on;
gzip_proxied any;
# 启用gzip压缩的最小文件;小于设置值的文件将不会被压缩
gzip_min_length 1k;
gzip_buffers 4 16k;
# 如果nginx中使用了多层代理 必须设置这个才可以开启gzip。
gzip_http_version 1.0;
# gzip 压缩级别 1-10
gzip_comp_level 2;
# 进行压缩的文件类型。
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
# 是否在http header中添加Vary: Accept-Encoding,建议开启
gzip_vary on;
gzip_disable "MSIE [1-6]\.";
# etag协商缓存 默认是开启的
etag on;
include /etc/nginx/conf.d/*.conf;
server {
#使用location进行正则匹配文件名称,针对特定的文件进行不同的强缓存设置
# html设置成协商缓存或者不缓存
#匹配html文件
location ~* \.(html)$ {
# 关闭访问日志
access_log off;
# 添加响应头,no-cache:协商缓存,no-store:不缓存
#配置为不进行强缓存
add_header Cache-Control max-age=no-cache;
}
# 特定文件设置强缓存
location ~* \.(css|js|png|jpg|jpeg|gif|gz|svg|mp4|ogg|ogv|webm|htc|xml|woff)$ {
access_log off;
#配置为强缓存时长是360000毫秒 也就是4天
add_header Cache-Control max-age=360000;
}
}
}
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++