vue打包后如何自动更新版本控制

最新推荐文章于 2024-07-23 19:35:12 发布

原创最新推荐文章于 2024-07-23 19:35:12 发布 · 2.3k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

文章介绍了如何在Node.js中使用fs模块动态修改package.json中的版本号和构建时间，并在打包时自动执行，以实现版本信息的自动化管理。此外，还提到了将这些信息存储在vuex中供应用使用的方法。

一般项目迭代发布到线上，每次手动改版本号和版本时间有点麻烦，这边来试试打包后自动更新版本号

思路：

node中通过fs模块可以对本地文件进行读写

打包时可以执行node文件

放置vuex变量中储存

实现：

全局创建文件buildTime.js ，引入fs模块，将调用方法的当前时间写入package.json文件中的lastBuildTime字段中，版本号也是可以按照具体的规则写方法。

let fs = require('fs')
const dayjs = require('dayjs')

const getPackageJson = () => {
  let data = fs.readFileSync('./package.json') //fs读取文件
  return JSON.parse(data) //转换为json对象
}
let packageData = getPackageJson()
const changeBuildTime = () => {
  packageData.lastBuildTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
}
changeBuildTime()
fs.writeFile('./package.json', JSON.stringify(packageData, null, '\t'), err => {
  if (err) {
    console.log('写入失败', err)
  } else {
    console.log('构建时间写入成功 ' + packageData.lastBuildTime)
  }
})

将package.json文件中存一下版本号和发版时间变量

打包build时先跑node ./buildTime.js这个脚本，然后获取当前时间刷新变量

存入vuex中即可

import pkg from '../../../package.json'
const app = {
  state: {
    // 版本信息
    aboutInfo: {
      version: `V${pkg.version}`,
      publishTime: `${pkg.lastBuildTime}`
    },
}

后续我们打包的时候试一下：