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": "1.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) {
                localStorage.setItem('vueVersion', vueVersion);
                window.location.reload();
                return;
            } else {
                localStorage.setItem('vueVersion', vueVersion);
                window.location.reload();
            }
        }
    });
}

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 => {})

写法二

/**
 * npm run build打包前执行此段代码
 *
 * npm run test打包前执行此段代码
 */

const fs = require('fs')

//返回version的json数据
function getVersionJson() {
  //fs读取文件
  let data = fs.readFileSync('./public/static/version.json')
  //转换为json对象
  return JSON.parse(data)
}
//获取version的json
let versionData = getVersionJson()
console.log(versionData, 'versionData+++++++++++++++++++')
//  使用当前时刻的时间搓生成永远不会重复的id
versionData.version = `wezone-${Date.now().toString(36)}`
//用versionData覆盖version.json内容
fs.writeFile('./public/static/version.json', JSON.stringify(versionData, null, '\t'), err => {})

修改package.json中scripts中的打包命令

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

版本号自加使用fs修改文件来实现
具体思路是：在执行打包命令npm run build时，同时执行一段js代码，该代码通过调用fs来自加修改version.json中的version，然后再进行打包操作。

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

//main.js中

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

vue项目版本打包更新后文件及浏览器存在缓存问题解决方案

猜你喜欢