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

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

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

相关文章
|
2月前
|
应用服务中间件 网络安全 nginx
手把手教你使用 Docker 部署 Nginx 教程
本文详解Nginx核心功能与Docker部署优势,涵盖镜像拉取、容器化部署(快速、挂载、Compose)、HTTPS配置及常见问题处理,助力高效搭建稳定Web服务。
1258 4
|
2月前
|
应用服务中间件 Linux nginx
在虚拟机Docker环境下部署Nginx的步骤。
以上就是在Docker环境下部署Nginx的步骤。需要注意,Docker和Nginix都有很多高级用法和细节需要掌握,以上只是一个基础入门级别的教程。如果你想要更深入地学习和使用它们,请参考官方文档或者其他专业书籍。
172 5
|
10月前
|
应用服务中间件 PHP nginx
今日小结通过aliyun的本地容器镜像部署我的nginx和php环境
简介: 本教程介绍如何基于 Dragonwell 的 Ubuntu 镜像创建一个运行 Nginx 的 Docker 容器。首先从阿里云容器镜像服务拉取基础镜像,然后编写 Dockerfile 确保 Nginx 作为主进程运行,并暴露 80 端口。最后,在包含 Dockerfile 的目录下构建自定义镜像并启动容器,确保 Nginx 在前台运行,避免容器启动后立即退出。通过 `docker build` 和 `docker run` 命令完成整个流程。
406 25
今日小结通过aliyun的本地容器镜像部署我的nginx和php环境
|
9月前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
525 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
7月前
|
应用服务中间件 Linux 网络安全
技术指南:如何把docsify项目部署到基于CentOS系统的Nginx中。
总结 与其他部署方法相比,将docsify项目部署到基于CentOS系统的Nginx中比较简单。以上步骤应当帮助你在不花费太多时间的情况下,将你的项目顺利部署到Nginx中。迈出第一步,开始部署你的docsify项目吧!
346 14
|
缓存 JavaScript 搜索推荐
vue中的一个内置组件Keep-Alive的作用及使用方法介绍——缓存不活动的组件实例
vue中的一个内置组件Keep-Alive的作用及使用方法介绍——缓存不活动的组件实例
982 1
|
JavaScript 前端开发 API
Vue.js:现代前端开发的强大框架
【10月更文挑战第11天】Vue.js:现代前端开发的强大框架
418 41
|
JavaScript 前端开发 API
Vue.js:打造高效前端应用的最佳选择
【10月更文挑战第9天】Vue.js:打造高效前端应用的最佳选择
164 2
|
JavaScript 前端开发 开发者
使用 Vue.js 和 Vuex 构建响应式前端应用
【10月更文挑战第2天】使用 Vue.js 和 Vuex 构建响应式前端应用
164 1
|
前端开发 JavaScript 应用服务中间件
使用nginx部署网站
使用nginx部署网站