vue 项目缓存问题

  • 部分用户打开了项目,但是一直都没有关闭浏览器的情况下,后台更新了项目,但是用户一直都不知道,还用的是浏览器自己缓存的,这个如何解决。

  • 项目更新后,部分页面出现
    Uncaught SyntaxError: Unexpected token <
    刷新后就能正常访问了,报这个错一般是找不到对应的js文件的问题。浏览器加载的还是缓存的js/xxx.js。

最直接的方案是:Ctrl+Shift+Delete 清缓存,世界瞬间安静了,但是用户是上帝,再说谁没事会去清缓存。

网上常见的解决方案:
vue项目中缓存问题
解决Vue入口文件index.html缓存问题
vue项目如何让客户端(缓存)自动更新?

自己项目中解决方法:

  • 1.index.html中禁止缓存
    <meta   http-equiv="Expires"   CONTENT="0">
    <meta   http-equiv="Cache-Control"   CONTENT="no-cache">
    <meta   http-equiv="Pragma"   CONTENT="no-cache">
  • 2.引入的静态js后加时间戳
 <script src="/static/api.js?v=<%= new Date().getTime() %>"></script>
  • 3.提示用户,版本更新,自己退出重新登录(没有办法的办法),进行刷新。获取最新项目
this.$router.replace({path: `/login?v=${new Date().getTime()}`})
location.replace(location.href)
    1. nginx中进行配置
      就这两句有用:
      expires -1s;
      add_header Cache-Control no-cache;
      add_header Cache-Control private;
 location / {
    root   C:/fair/site/abc
    try_files $uri $uri/ /index.html;
    expires -1s;   
    add_header Cache-Control no-cache;   
    add_header Cache-Control private; 
}

暂时是这样解决。

推荐阅读更多精彩内容