[JavaScript知识库]Vue项目线上发布，都有缓存不生效怎么办？

前言：

每次把修改后的vue项目build构建的打包文件丢到线上服务器后，发现还是上一次的效果，新修改的不起效，每次都需要ctrl+F5强制刷新页面，用户太多不可能让所有人每次都这样去折腾，为啥？

vue cli不是给静态资源css、js、img自动加了哈希么，怎么还会有缓存？

经过多方调试，发现是因为入口文件index.html需要在服务器端设置禁止缓存。

解决缓存问题可以分两步走：

①nginx配置index不缓存

②代码加入版本更新检测强制刷新

解决方案一：（Linux服务器设置nginx禁用html缓存）?

只配置了不缓存html和htm，js,css等文件没有做处理，是因为我们前端编译发布代码时，如果某个js或css有更新，会自动在文件名上加时间戳、哈希值，这样一发新版时，只要客户端请求了新版的html，就会自动找到新的js、css，没有更新的js、css还会继续用缓存，这样既不会太大的影响网页的访问速度，也能保证更新的代码不走缓存。

禁止index.html

server {
        listen       80;
        server_name  test.exmaple.cn;
 
 
        location / {
                if ($request_filename ~* .*\.(?:htm|html)$)  ## 配置页面不缓存html和htm结尾的文件
                {
                   add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
                }
                root /web/;
                index index.html;
                try_files $uri $uri/ /index.html =404;
        }
}

暴力禁止所有静态资源缓存

location ~.*\.(js|css|html|png|jpg)$
{
   add_header Cache-Control no-cache;
}  

解决方案二：（Vue-cli代码控制）

1.在public静态目录下新建version.json每次发版更改里面的版本号?

{
    "version": "0.0.1"
}

2.在src中新建 libs/versionUpdate.js文件

import axios from 'axios'

const isNewVersion = () => {
  let url = `//${window.location.host}/version.json?t=${new Date().getTime()}`
  axios.get(url).then(res => {
    if (res.status === 200) {
      let vueVersion = res.data.version || '1.0.0'
      let localVueVersion = localStorage.getItem('vueVersion')
      localStorage.setItem('vueVersion', vueVersion)
      if (localVueVersion && localVueVersion != vueVersion) {
        alert('检测到新版本，请点击确认刷新页面哦')
        window.location.reload(true)
        return
      }
    }
  })
}

export default {
  isNewVersion
}

3.在全局路由拦截中写，只要每次版本号不同就重新加载页面配合第一步就可以清楚浏览器缓存

import versionTood from '@/libs/versionUpdate'
 
router.beforeEach(( to, from, next ) => {
  //判断当前代码版本是否与服务器中代码版本一致，如不一致则刷新页面获取最新
  versionTood.isNewVersion();
}

开发者涨薪指南

48位大咖的思考法则、工作方式、逻辑体系