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;
}# 图片资源
location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|flv|mp4|ico)$ {expires 30d;access_log off;}

参数	说明
Cache-Control: no-cache	协商缓存，只能应用于http 1.1，会返回304(资源无更新)
Cache-Control: no-store	禁止缓存
Pragma: no-cache	和 Cache-Control: no-cache 相同，应用于 http 1.0 和http 1.1

协商缓存的参数

Last-Modified / IF-Modified-Since 验证修改时间
Etag / IF-None-Match 验证文件指纹

参考
https://cli.vuejs.org/zh/guide/deployment.html
前端项目中浏览器缓存的更新不及时问题及解决方法
中高级前端工程师都需要熟悉的技能–前端缓存

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

vue项目打包部署nginx跨域
vue项目打包部署nginx跨域 vue项目连接外部api接口时,打包部署到nginx后出现api404,api跨域问题,这个时候需要给vue项目本身进行跨域,再配置nginx中进行跨域即可解决,详见 ...
【转】vue项目打包部署——nginx代理访问
我又来了,今天部署了下vue项目,使用nginx做了代理,这样可以解决跨域的问题,这里做一个简单讲解. 1.先看vue项目打包(我这里使用的是vscode开发工具) 这里是我的项目结构: 打包之前需要 ...
vue项目打包部署linux_Vue项目打包部署到Nginx服务器
"随着前后端分离项目的流行,vue项目开发部署也成为了前端人员必备技能:本文将带你学习vue项目部署及遇到的各种坑." 关于vue项目部署不得不提的是配置文件vue.config. ...
Vue项目打包部署到Nginx服务器步骤总结
前期准备工作: 1. 准备一台服务器: 2. 根据服务器的系统环境安装配置Nginx; 3. 了解Nginx的配置文件,了解常用的linux系统操作命令 4. 进行Vue项目的打包部署因为我只是单纯 ...
Vue项目打包部署总结
由于之前对前端部署上线这一套不清楚,所以这次通过查找多方资料总结一下.使用Vue作先后端分离项目时,一般前端是单独部署,用户访问的也是前端项目地址,所以前端开发人员颇有必要熟悉一下项目部署的流程与各种 ...
Vue 项目打包部署实战完整流程总结!
使用Vue做前后端分离项目时,通常前端是单独部署,用户访问的也是前端项目地址,因此前端开发人员很有必要熟悉一下项目部署的流程与各类问题的解决办法了. Vue项目打包部署本身不复杂,不过一些前端同学可能 ...
vue项目打包部署流程
vue项目打包部署流程一.打包二.部署三.部署多个项目一.打包 (可选)去除打包后会生成的map文件:在vue.config.js中添加productionSourceMap: false, ...
vue项目打包部署到服务器,Vue项目打包部署到apache服务器的方法步骤
vue项目在开发环境下,让项目运行起来,是通过npm run dev命令,原理是在本地搭建了一个express服务器. 但是在服务器上就不是这样的,必须要通npm run build命令来对整个项目进 ...
vue项目打包部署-----解决打包后访问资源失败问题
vue项目打包部署-----解决打包后访问资源失败问题参考文章: (1)vue项目打包部署-----解决打包后访问资源失败问题 (2)https://www.cnblogs.com/ycsc/p/1 ...

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

目录

1、部署单个站点

2、部署多个站点

3、缓存问题解决

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

最新文章

热门文章