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;

参考

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

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

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