vue项目版本更新后文件存在缓存问题解决方案

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

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

2.在public/json目录下新建version.json每次发版更改里面的版本号

{
    "version": "1.0.8"
}

3.在src中新建 api/versionUpdate.js文件

import axios from 'axios'
const isNewVersion = () => {
    let url = `../../json/version.json?t=${new Date().getTime()}`;
    axios.get(url).then(res => {
        if (res.status === 200) {
            let vueVersion = res.data.version;
            let localVueVersion = localStorage.getItem('vueVersion');
            if (localVueVersion && localVueVersion != vueVersion) {
                localStorage.setItem('vueVersion', vueVersion);
                window.location.reload();
                return;
            } else {
                localStorage.setItem('vueVersion', vueVersion);
            }
        }
    });
}

export default {
    isNewVersion
}

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

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

参考来源：http://t.zoukankan.com/konglingxi-p-14348940.html