nginx 配置vue项目缓存
Posted changYao
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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; } } }
以上是关于nginx 配置vue项目缓存的主要内容,如果未能解决你的问题,请参考以下文章