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

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

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

相关文章
|
3月前
|
编解码 应用服务中间件 Linux
centos配置nginx-rtmp实现ffmpeg转码rtsp为rtmp视频流
centos配置nginx-rtmp实现ffmpeg转码rtsp为rtmp视频流
385 1
|
3月前
|
Ubuntu 安全 应用服务中间件
详细指南:配置Nginx服务器在Ubuntu平台上
以上步骤涵盖了基本流程:从软件包管理器获取 Ngnix, 设置系统服务, 调整UFW规则, 创建并激活服务器块(也称作虚拟主机), 并进行了初步优化与加固措施。这些操作都是建立在命令行界面上,并假设用户具有必要权限(通常是root用户)来执行这些命令。每个操作都有其特定原因:例如,设置开机启动确保了即使重启后也能自动运行 Ngnix;而编辑server block则定义了如何处理进入特定域名请求等等。
288 18
|
3月前
|
Ubuntu 安全 应用服务中间件
详细指南:配置Nginx服务器在Ubuntu平台上
以上步骤涵盖了基本流程:从软件包管理器获取 Ngnix, 设置系统服务, 调整UFW规则, 创建并激活服务器块(也称作虚拟主机), 并进行了初步优化与加固措施。这些操作都是建立在命令行界面上,并假设用户具有必要权限(通常是root用户)来执行这些命令。每个操作都有其特定原因:例如,设置开机启动确保了即使重启后也能自动运行 Ngnix;而编辑server block则定义了如何处理进入特定域名请求等等。
377 17
|
4月前
|
数据建模 应用服务中间件 PHP
配置nginx容器和php容器协同工作成功,使用ip加端口的方式进行通信
本示例演示如何通过Docker挂载同一宿主目录至Nginx与PHP容器,实现PHP项目运行环境配置。需注意PHP容器中监听地址修改为0.0.0.0:9000,并调整Nginx配置中fastcgi_pass指向正确的IP与端口。同时确保Nginx容器中/var/www/html权限正确,以避免访问问题。
配置nginx容器和php容器协同工作成功,使用ip加端口的方式进行通信
|
4月前
|
Ubuntu 应用服务中间件 Linux
在Ubuntu上配置Nginx实现开机自启功能
至此,Nginx应该已经被正确地设置为开机自启。在Ubuntu中利用 `systemd`对服务进行管理是一种高效的方式,为系统管理员提供了强大的服务管理能力,包括但不限于启动、停止、重启服务,以及配置服务的开机自启动。通过这些简洁的命令,即使是对Linux不太熟悉的用户也能轻松地进行配置。
212 0
|
3月前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
346 2
|
2月前
|
缓存 JavaScript
vue中的keep-alive问题(2)
vue中的keep-alive问题(2)
320 137
|
6月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
830 0
|
6月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
|
7月前
|
JavaScript 数据可视化 前端开发
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑,结合D3强大的数据可视化能力,实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展(如节点类型定制、连接样式优化等),并提供了性能优化方案以应对大数据量场景。最终,展示了基础网络拓扑、实时更新拓扑等应用实例,为开发者提供了一套完整的实现思路和实践经验。
930 77