Vue项目新打包文件放在服务器后，客户端自动更新问题

每次测试构建或者打包更新版本发到服务器上，导致偶尔会出现不能及时更新到最新代码的问题。

一、在vue.config.js中配置output，打包后的文件会带时间戳

const Timestamp = new Date().getTime();
module.exports = {
    // 每次构建打包时给文件名加上时间戳，确保每次版本更新的文件名不一样
    configureWebpack: {
        output: {
            filename: `js/[name].${Timestamp}.js`, 
            chunkFilename: `js/[name].${Timestamp}.js`
        }
    }
}   

二、在public/static目录下新建version.json文件

{
    "version": "0.0.1"
}

三、在src中新建 utils文件夹 文件夹中新建versionUpdate.js文件

import axios from 'axios'
const isNewVersion = () => {
    let url = `//${window.location.host}/static/version.json?t=${new Date().getTime()}`;
    axios.get(url).then(res => {
        if (res.status === 200) {
            let vueVersion = res.data.version,
                localVueVersion = localStorage.getItem('vueVersion');
            if (localVueVersion && localVueVersion != vueVersion) {
                alert('当前版本有更新，点击确认立即体验')
                localStorage.setItem('vueVersion', vueVersion);
                window.location.reload();
                return;
            } else {
                localStorage.setItem('vueVersion', vueVersion);
            }
        }
    });
}

export default {
    isNewVersion
}

四、在src文件夹下创建addVersion.js

//npm run build打包前执行此段代码
//npm run test打包前执行此段代码
const fs = require('fs');

//返回version的json数据
function getVersionJson() {
  let data = fs.readFileSync('./public/static/version.json') //fs读取文件
  return JSON.parse(data) //转换为json对象
}

let versionData = getVersionJson(), //获取version的json
    arr = versionData.version.split('.') //切割后的版本号数组
arr[2] = parseInt(arr[2]) + 1
versionData.version = arr.join('.') //转换为以"."分割的字符串
//用versionData覆盖version.json内容
fs.writeFile('./public/static/version.json', JSON.stringify(versionData, null, '\t'), err => {})

五、修改package.json中scripts中的打包命令，以下是以vue-element-admin为例，就是在打包前更新版本号

"scripts": {
    "build:prod": "node ./src/addVersion.js && vue-cli-service build",
},

六、以下方式为引用别人写的

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

//第六步我尝试用过之后发现打包后进入页面是空白的也没有报错，不知道是什么原因所以我就改成以定时任务的方式进行轮询，每隔10秒进行一次检测
import versionTood from '@/utils/versionUpdate';
//检测版本号方法
    checkVersion(){
      if(this.setInter){
        clearInterval(this.setInter)
        this.setInter = null
      }else{
        let that = this
        this.setInter = setInterval(function(){
          versionTood.isNewVersion();
        },10000)
      }
    }