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