vue + vite 项目打包时自动更新版本号

前言

页面中会显示当前版本号，每次更新需要手动更改版本号会很麻烦，现在是每次npm run build时会自动更新版本号，更新规律自己定义。

TODO：没有区分开发环境、测试环境、正式环境

创建自动更新版本脚本

在根目录下创建autoVersion.js脚本文件

const fs = require('fs')
const path = require('path')
const timeVersion = new Date().getTime()

if (fs.existsSync('./public')) {
    

const fs = require('fs')
const path = require('path')
const timeVersion = new Date().getTime()


if (fs.existsSync('./public')) {
    const versionData = { version: timeVersion.toString() } // 根据需要生成新版本号
    fs.writeFile('./public/version.json', `${JSON.stringify(versionData)}`, (error) => {})
}

 

修改package.json配置

修改build打包，新增autoVersion

    "build": "npm run autoVersion && vite build",
    "autoVersion": "node autoVersion.js"

 

const version = require('../package.json').version
const versionStorage = localStorage.getItem('version')
if (version != versionStorage) {
  localStorage.clear()
  localStorage.setItem('version', version)
  setTimeout(() => {
    window.location.reload(true)
  }, 500)
}

 

 

方案二：

let firstV = [] //记录初始获得的 script 文件字符串
let currentV = [] //记录当前获得的 script 文件字符串

//1、轮询打包后的 index.html，比较生成的 js 文件的 hash，如果不同，说明版本更新
async function getHtml() {
    let res = await axios.get('/index.html?date=' + Date.now())
    if (res.status == '200') {
        let text = res.data
        if (text) {
            // 解析 html 内容，匹配 script 字符串
            let reg = /<script([^>]+)><\/script>/gi
            return text.match(reg)
        }
    }
    return []
}
//2、轮询打包后的 index.html，取两次响应头中的 eTag 比较，如果不同，说明版本更新
async function getEtag() {
    let res = await axios.head('/index.html')
    if (res.status == '200') {
        if (res.headers && res.headers.etag) {
            return res.headers.etag
        }
    }
    return ''
}
function isEqual(a, b) {
    return (a.length = Array.from(new Set(a.concat(b))).length)
}