明天的明天 永远的永远 未知的一切 我与你一起承担 ??

是非成败转头空 青山依旧在 几度夕阳红 。。。
  博客园  :: 首页  :: 管理

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

Posted on 2025-01-13 17:12  且行且思  阅读(570)  评论(0)    收藏  举报

前言

页面中会显示当前版本号,每次更新需要手动更改版本号会很麻烦,现在是每次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)
}