vue项目如何让网页端浏览器不缓存自动更新？

Question

vue-li3项目打包之后部署到服务器的nginx上，怎么让浏览器不缓存信息，每次更新，用户都能看到最新的界面，而不是缓存的？

Answer 1

通过 npm run build 打包得到一个 index.html 文件，里面引入了带有 hash 值的 css script 资源，修改了这些资源一般来说不会被缓存（因为 hash 变了），你所说的缓存应该是缓存了 index.html 文件，导致加载了之前的静态资源。

可以在 nginx 配置文件中禁止缓存 index.html 文件

location /myApp/ {
  root /www/webproject;
  try_files $uri @index;
}

location @index {
  root /www/webproject;
  add_header Cache-Control no-store;
  expires 0;
  try_files /crmwap/index.html =404;
}

关于更多缓存知识欢迎查看这篇关于浏览器缓存的文章