vue项目打包后自动生成版本号，判断是否清空缓存（亲测有效）

vue项目新增版本号配置，打包后自动生成版本号【版本号写入成功 202307.13.7（年月日+打包次数）】，判断当前是否为最新版本，如果不是清空缓存重新获取！下面web建站小编给大家简单介绍一下具体实现步骤！

1、在根目录下新增buildVersion.js文件，写入以下代码：

let fs = require('fs')
//拿package的json数据
const getPackageJson = () => {
  let data = fs.readFileSync('./package.json') //fs读取文件
  return JSON.parse(data) //转换为json对象
}
let packageData = getPackageJson()
const getCurrentDate = () => {
  let time = new Date()
  let a = time.toLocaleDateString()

  let x = a.split('-') //根据时间类型进行判断切割
  if (x[1].length < 2) {
    x[1] = '0' + x[1]
  }
  if (x[2].length < 2) { x[2] = '0' + x[2] } return x.join('') } const changeVersion = () => {
    if (getCurrentDate().substring(0, 6) === String(packageData.version.split('.')[0])) {
      let x = Number(packageData.version.split('.')[2])
      x = x + 1
      let d = getCurrentDate().substring(0, 6) + '.' + getCurrentDate().substring(6);
      packageData.version = `${d}.${x}`
    } else {
      let d = getCurrentDate().substring(0, 6) + '.' + getCurrentDate().substring(6);
      packageData.version = `${d}.1`
  }
}
changeVersion()
fs.writeFile(
  './package.json',
  JSON.stringify(packageData, null, '\t'),
  (err) => {
    if (err) {
      console.log('写入失败', err)
    } else {
      console.log('版本号写入成功', packageData.version)
    }
  }
)

2、在根目录下新增version.js文件，写入以下代码：

import packageVersion from './package.json'
const version = packageVersion.version;
export default { version }

3、在package.json文件中修改打包字段，代码如下：

"scripts": {
  ...
  "build": "node ./buildVersion.js && node build/build.js"
},

4、在App.vue中引入最新版本号进行判断是否清除缓存，代码如下：

import _v from '../version.js'

created() {
  this.checkForUpdate()
},
methods: {
  checkForUpdate() {
    let currentVersion = _v.version; //获取最新版本号
    if(currentVersion !== localStorage.getItem("version")){
      //版本号不是最新执行以下代码
      window.sessionStorage.clear();
      window.localStorage.clear();
      window.location.reload(true);
      localStorage.setItem("version", currentVersion);
    }
  }
}

本文链接：http://so.lmcjl.com/news/6848/