nginx 配置vue项目缓存
一、vue的所有资源修改后打包出来的名称都会改变,所以可以使用强缓存,对css、js、png、ttf、jpg等
location ~* \.(css|js|png|jpg|jpeg|gif|gz|svg|mp4|ogg|ogv|webm|htc|xml|woff)$ {
access_log off;
add_header Cache-Control max-age=604800;
}二、html文件因为名称不会改变,所以使用协商缓存,html文件有改动就会立即更新,max-age=no-cache代表进入协商缓存,文件改动会自动更新,不改动会返回304
location ~* \.(html)$ {
access_log off;
add_header Cache-Control max-age=no-cache;
}三、完整代码 + gzip压缩
#user nobody;
worker_processes 1;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
events {
worker_connections 1024;
}
http {
include 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 logs/access.log main;
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
#gzip on;
server {
gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
#gzip_http_version 1.0;
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;
gzip_vary off;
gzip_disable "MSIE [1-6]\.";
listen 8010;
server_name localhost;
location /wallet_admin_test {
proxy_pass http://suiyi.columbu.world/wallet_admin_test;
}
error_page 500 502 503 504 /50x.html;
root html/dist;
location / {
index index.html;
try_files $uri $uri/ /index.html;
}
location ~* \.(html)$ {
access_log off;
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;
add_header Cache-Control max-age=604800;
}
}
}