Vue项目打包部署Nginx配置及前端缓存问题解决

简介: Vue项目打包部署Nginx配置及前端缓存问题解决

1、部署单个站点

配置如下

server {
    listen       80;
    server_name  localhost;
    location / {
      root   /app;    
      index  index.html;
      try_files $uri $uri/ /index.html;
    }
}

其中:

/app 是网站根目录

2、部署多个站点

server {
  listen 80;
  listen 443 ssl http2;
  server_name www.demo.com;
  if ($ssl_protocol = "") { return 301 https://$host$request_uri; }
  # 前端
  location / {
      root /data/wwwroot/www;
      index  index.html;
      try_files $uri $uri/ /index.html;
    }
   # 后台
   location ^~/admin {
      alias /data/wwwroot/admin;
      try_files $uri $uri/ /admin/index.html;
    }
  # 数据接口
  location /api {
     proxy_pass http://127.0.0.1:5000;
  }
}

3、缓存问题解决


  • 强制缓存
  • Expires:依赖本地时间和服务器时间
  • Cache-control:max-age=10
  • 协商缓存
  • last-modified:文件修改时间
  • ETag:文件指纹
  • 禁用缓存
  • Cache-control:no-store

浏览器缓存分类:

html默认当做了静态文件传输,会被浏览器缓存,每次打开都拿不到最新的页面

使用Charles抓包发现:

访问网站首页压根没有进行请求,直接从浏览器本地获取了index.html文件。看来浏览器使用了强制缓存策略

nginx 添加以下配置,告诉浏览器怎么缓存html文件

# 对html文件限制缓存
location ~ .*\.(html)$ {  
  # 不缓存
  # add_header Cache-Control no-store;  
  # 或者用 协商缓存
  add_header Cache-Control no-cache;
  add_header Pragma no-cache; 
}
# css/js文件
location ~ .*\.(js|css)?$ {
  # 缓存有效期:7天
  expires 7d;
  access_log off;
}

image.png

参考

https://cli.vuejs.org/zh/guide/deployment.html

前端项目中 浏览器缓存的更新不及时问题及解决方法

中高级前端工程师都需要熟悉的技能–前端缓存

相关文章
|
8月前
|
缓存 负载均衡 监控
135_负载均衡:Redis缓存 - 提高缓存命中率的配置与最佳实践
在现代大型语言模型(LLM)部署架构中,缓存系统扮演着至关重要的角色。随着LLM应用规模的不断扩大和用户需求的持续增长,如何构建高效、可靠的缓存架构成为系统性能优化的核心挑战。Redis作为业界领先的内存数据库,因其高性能、丰富的数据结构和灵活的配置选项,已成为LLM部署中首选的缓存解决方案。
862 25
|
8月前
|
缓存 并行计算 监控
vLLM 性能优化实战:批处理、量化与缓存配置方案
本文深入解析vLLM高性能部署实践,揭秘如何通过continuous batching、PagedAttention与前缀缓存提升吞吐;详解批处理、量化、并发参数调优,助力实现高TPS与低延迟平衡,真正发挥vLLM生产级潜力。
2205 0
vLLM 性能优化实战:批处理、量化与缓存配置方案
|
9月前
|
缓存 Java 应用服务中间件
Spring Boot配置优化:Tomcat+数据库+缓存+日志,全场景教程
本文详解Spring Boot十大核心配置优化技巧,涵盖Tomcat连接池、数据库连接池、Jackson时区、日志管理、缓存策略、异步线程池等关键配置,结合代码示例与通俗解释,助你轻松掌握高并发场景下的性能调优方法,适用于实际项目落地。
1678 5
|
10月前
|
缓存 NoSQL 数据库
Django缓存机制详解:从配置到实战应用
本文全面解析Django缓存技术,涵盖配置方法与六大缓存后端,结合实战场景演示四种典型应用方式,帮助开发者提升Web应用性能,应对高并发挑战。
363 0
|
11月前
|
缓存 NoSQL API
Django缓存机制详解:从配置到实战应用
本文介绍了 Django 缓存机制的基础知识与实战应用,涵盖缓存概念、Redis 安装配置、缓存策略及 API 使用,并通过 RBAC 权限系统演示缓存的读写与删除操作,助力提升 Web 应用性能。
301 0
|
应用服务中间件 Linux PHP
nginx怎么部署php项目,如何php项目部署到nginx
php项目部署到nginx的方法:首先安装“Nginx”和“php-fpm”;然后将项目复制到“nginx/html”文件下;接着修改配置文件;最后重新载入Nginx并启动“php-fpm”即可。
|
应用服务中间件 Linux 网络安全
Centos 8.0中Nginx配置文件和https正书添加配置
这是一份Nginx配置文件,包含HTTP与HTTPS服务设置。主要功能如下:1) 将HTTP(80端口)请求重定向至HTTPS(443端口),增强安全性;2) 配置SSL证书,支持TLSv1.1至TLSv1.3协议;3) 使用uWSGI与后端应用通信(如Django);4) 静态文件托管路径设为`/root/code/static/`;5) 定制错误页面(404、50x)。适用于Web应用部署场景。
1081 87
|
9月前
|
编解码 应用服务中间件 Linux
centos配置nginx-rtmp实现ffmpeg转码rtsp为rtmp视频流
centos配置nginx-rtmp实现ffmpeg转码rtsp为rtmp视频流
711 1
|
负载均衡 应用服务中间件 nginx
Nginx配置与命令
Nginx 是一款高性能的 HTTP 和反向代理服务器,其配置文件灵活且功能强大。本文介绍了 Nginx 配置的基础结构和常用指令,包括全局块、Events 块、HTTP 块及 Server 块的配置方法,以及静态资源服务、反向代理、负载均衡、HTTPS 和 URL 重写等功能实现。此外,还提供了常用的 Nginx 命令操作,如启动、停止、重载配置和日志管理等,帮助用户高效管理和优化服务器性能。
1154 14
|
9月前
|
Ubuntu 安全 应用服务中间件
详细指南:配置Nginx服务器在Ubuntu平台上
以上步骤涵盖了基本流程:从软件包管理器获取 Ngnix, 设置系统服务, 调整UFW规则, 创建并激活服务器块(也称作虚拟主机), 并进行了初步优化与加固措施。这些操作都是建立在命令行界面上,并假设用户具有必要权限(通常是root用户)来执行这些命令。每个操作都有其特定原因:例如,设置开机启动确保了即使重启后也能自动运行 Ngnix;而编辑server block则定义了如何处理进入特定域名请求等等。
508 18