nuxt3打包时版本号自增+浏览器自动刷新

165 阅读1分钟

1、新建/public/static/version.json文件

{
	"version": "2.4.42"
}

2、使用nodejs编写获取json版本信息的脚本/addVersion.js

import fs from 'fs/promises'
const packageJsonPath = '.app/public/static/version.json' // 版本号文件路径 需手动修改
const packageJson = JSON.parse(await fs.readFile(packageJsonPath))

const versionParts = packageJson.version.split('.')
const majorVersion = parseInt(versionParts[0])
const minorVersion = parseInt(versionParts[1])
const patchVersion = parseInt(versionParts[2])

// 增加小版本号
const newPatchVersion = patchVersion + 1

// 构建新的版本号
const newVersion = `${majorVersion}.${minorVersion}.${newPatchVersion}`

fs.writeFile(
  packageJsonPath,
  JSON.stringify(
    {
      version: newVersion,
    },
    null,
    '\t',
  ),
  () => {},
)

3、package.json中配置

  "scripts": {
    "dev": "node .app/addVersion.js  && nuxi dev --open", // 运行dev  可加可不加
    "generate": "node .app/addVersion.js &&  nuxi generate" // 触发打包   打包前执行node .app/addVersion.js
  },

4、在入口文件使用 如APP.vue

onMounted(async () => {
  try {
    let url = `//${window.location.host}/static/version.json`
    const res: { version: string } = await $fetch(url, { method: 'GET' })
    if (res.version && auth.version !== res.version) {
      // $fetch为发送网络请求  使用axios也可
      // auth.version 是保存在本地里的版本号
      // 版本不一致,可自动更新,或者提示弹框,让用户刷新,自行判断
      location.reload()
    }
    auth.changeVersion(res.version) // 保存版本号
  } catch (error) {}
})