vue2、vue3项目打包生成txt文件-自动记录打包日期：git版本、当前分支、提交人姓名、提交日期、提交描述等信息 和 前端项目的版本号json文件

已于 2025-05-19 17:37:58 修改
阅读量564 收藏 5
点赞数 16
文章标签： git 前端 json vue.js
于 2025-05-19 17:32:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44136028/article/details/148069178
版权
vue2 打包生成text文件 和 前端项目的版本号json文件
  • 项目打包生成txt文件-自动记录git版本、当前分支、提交人姓名、提交日期、提交描述等信息
  • 生成版本号json文件-自动记录当前版本号、打包时间等信息
  • 新建branch-version-webpack-plugin.js文件
// 同步子进程
const execSync = require('child_process').execSync
const address = require('address')
const needHost = address.ip() || 'localhost' // 需要更改的ip
const fs = require('fs');
const path = require('path');
const moment = require('moment');
// 配置常量
const VERSION_FILES = {
  TXT: 'version.txt',
  JSON: 'version.json'
};
// 时间格式生成
function dateFormat(date) {
  const y = date.getFullYear()
  const M = date.getMonth() + 1 < 10 ? `0${date.getMonth() + 1}` : date.getMonth() + 1
  const d = date.getDate() < 10 ? `0${date.getDate()}` : date.getDate()
  const h = date.getHours() < 10 ? `0${date.getHours()}` : date.getHours()
  const m = date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes()
  const s = date.getSeconds() < 10 ? `0${date.getSeconds()}` : date.getSeconds()
  return `${y}-${M}-${d} ${h}:${m}:${s}`
}
// 读取 package.json 文件
const packagePath = path.resolve(__dirname, '../package.json');
const packageJson = JSON.parse(fs.readFileSync(packagePath, 'utf8'));

// 读取或创建版本历史文件
// const versionsPath = path.resolve(__dirname, './versions.json');

// 获取要更新的版本类型 (major, minor, patch) 主修订 次修订 修订号
// npm run build:prod major
console.log( process.argv[3],'process');
// 修订当前的版本号
function updateVersion() {
  const [major, minor, patch] = packageJson.version.split('.').map(Number); 
  if(process.argv[3] === 'major') {
    return `${major + 1}.0.0`;
  }
  if(patch > 20) {
    return `${major}.${minor + 1}.0`;
  }
  return `${major}.${minor}.${patch + 1}`;
}

// 增加修订号（可以根据需要修改为增加主版本号或次版本号）
packageJson.version = updateVersion()
console.log(`版本号已更新为：${packageJson.version}`);

// 更新项目的版本号
function getProjectVersion() {
  return{
   version: packageJson.version,
   buildTime: moment().format('YYYY-MM-DD HH:mm:ss')
  }
}


fs.writeFileSync(packagePath, JSON.stringify(packageJson, null, 2)); // 写回 package.json
// fs.writeFileSync('./version.json', JSON.stringify(getProjectVersion(), null, 2)); // 写入 version.json

// 格式化日对象
const getNowDate = () => {
  const date = new Date()
  const sign2 = ':'
  const year = date.getFullYear() // 年
  let month = date.getMonth() + 1 // 月
  let day = date.getDate() // 日
  let hour = date.getHours() // 时
  let minutes = date.getMinutes() // 分
  let seconds = date.getSeconds() // 秒
  const weekArr = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天']
  // eslint-disable-next-line no-unused-vars
  const week = weekArr[date.getDay()]
  // 给一位数的数据前面加 “0”
  if (month >= 1 && month <= 9) {
    month = '0' + month
  }
  if (day >= 0 && day <= 9) {
    day = '0' + day
  }
  if (hour >= 0 && hour <= 9) {
    hour = '0' + hour
  }
  if (minutes >= 0 && minutes <= 9) {
    minutes = '0' + minutes
  }
  if (seconds >= 0 && seconds <= 9) {
    seconds = '0' + seconds
  }
  return year + '-' + month + '-' + day + ' ' + hour + sign2 + minutes + sign2 + seconds
}

// 获取当前git分支信息
function getBranchVersionInfo() {
  // 当前分支名
  const vName = execSync('git name-rev --name-only HEAD').toString().trim()
  // 提交的commit hash
  const commitHash = execSync('git show -s --format=%H').toString().trim()
  // 提交人姓名
  const name = execSync('git show -s --format=%cn').toString().trim()
  // 提交日期
  const date = dateFormat(new Date(execSync('git show -s --format=%cd').toString()))
  // 提交描述
  const message = execSync('git show -s --format=%s').toString().trim()
  // ip
  const ip = needHost

  const buildDate = getNowDate()
  return `
    buildDate: ${buildDate}\n
    ip地址: ${ip}\n
    当前分支名：${vName}\n
    提交的hash：${commitHash}\n
    提交人姓名：${name}\n
    提交日期：${date}\n
    提交描述：${message}
  `
}
// 创建分支版本类
class BranchVersionWebpackPlugin {
  constructor(options) {
    // options 为调用时传的参数
    // console.log('BranchVersionWebpackPlugin 被调用！', options)
  }
  /**
   * compiler: webpack 的实例 所有的内容
   * compilation: 本次打包的内容
   * */

  apply(compiler) {
    // 异步方法，生成打包目录时：生成文件
    compiler.hooks.emit.tapAsync('BranchVersionWebpackPlugin', (compilation, cb) => {
      // 添加分支版本信息文件
      const branchVersionInfo = getBranchVersionInfo()
      compilation.assets[VERSION_FILES.TXT] = {
        source: () => branchVersionInfo,
        size: () => branchVersionInfo.length
      }
      // 添加前端版本信息文件
      compilation.assets[VERSION_FILES.JSON] = {
        source: () => packageJson.version,
        size: () => branchVersionInfo.length
      }

      cb()
    })
  }
}

module.exports = BranchVersionWebpackPlugin
  • 在vue.config.js文件中引入
// 分支版本信息 - 引入自定义插件
const BranchVersionWebpackPlugin = require('./webpack-plugin/branch-version-webpack-plugin');

module.exports = {
    ...省略
   configureWebpack: {
    entry:'./src/main.js',//入口
    plugins: [
      new BranchVersionWebpackPlugin()
    ],
    ...省略
  },
}
  • 打包在dist目录下生成的version.txt文件内容如下
    buildDate: 2025-05-16 16:50:44

    ip地址: xxxx

    当前分支名：dev

    提交的hash：xxxx

    提交人姓名：xxxxx

    提交日期：2025-05-08 11:52:43

    提交描述：'1'
  • 打包在dist目录下生成的version.json文件内容如下
{
  "version": "1.0.0",
  "buildTime": "2025-05-16 16:50:44"
}
vue3 打包生成text文件 和 前端项目的版本号json文件
  • 安装插件
npm install moment --save 
npm install address --save
npm install --save-dev @types/address 
npm install --save-dev @types/moment
npm install @types/node --save-dev
  • 新建 branch-version-webpack-plugin.ts
// vite-branch-version-plugin.ts
import { execSync } from 'child_process';
import { ip } from 'address';
import type { PluginOption, Plugin } from 'vite';
import moment from 'moment';
import fs from 'fs';
import path from 'path';

const needHost = ip() || 'localhost' // 需要更改的ip地址

// 读取 package.json 文件
const packagePath = path.resolve(__dirname, '../package.json');
const packageJson = JSON.parse(fs.readFileSync(packagePath, 'utf8'));

// 修订当前的版本号
function updateVersion() {
    const [major, minor, patch] = packageJson.version.split('.').map(Number); 
    if(process.argv[4] === 'major') {
      return `${major + 1}.0.0`;
    }
    if(patch > 20) {
      return `${major}.${minor + 1}.0`;
    }
    return `${major}.${minor}.${patch + 1}`;
  }
// 更新项目的版本号
// function getProjectVersion() {
//     return{
//      version: packageJson.version,
//      buildTime: moment().format('YYYY-MM-DD HH:mm:ss')
//     }
//   }
  
// 增加修订号（可以根据需要修改为增加主版本号或次版本号）
packageJson.version = updateVersion()
console.log(`版本号已更新为：${packageJson.version}`);
// 写回 package.json 文件
fs.writeFileSync(packagePath, JSON.stringify(packageJson, null, 2)); // 写回 package.json

// 在根目录写入 version.json
// fs.writeFileSync('./version.json', JSON.stringify(getProjectVersion(), null, 2)); // 写入 version.json


interface PluginOptions {
  filename?: string;
  silent?: boolean;
  VERSION_FILES?: string[];
}
function formatDateTime(date?: any) {
    return {
      iso: moment().format(),
      human: moment(date).format('YYYY-MM-DD HH:mm:ss'),
      buildDate: moment().format('YYYY-MM-DD HH:mm:ss'),
      git: moment(date).format('ddd MMM D HH:mm:ss YYYY Z')
    };
  }
  // 获取当前git分支信息
  function getBranchVersionInfo() {
    // 当前分支名
    const vName = execSync('git name-rev --name-only HEAD').toString().trim()
    // 提交的commit hash
    const commitHash = execSync('git show -s --format=%H').toString().trim()
    // 提交人姓名
    const name = execSync('git show -s --format=%cn').toString().trim()
    // 提交日期
    // const date = dateFormat(new Date(execSync('git show -s --format=%cd').toString()))
    const date = formatDateTime(new Date(execSync('git show -s --format=%cd').toString())).human
    // 提交描述
    const message = execSync('git show -s --format=%s').toString().trim()
    // ip
    const ip = needHost
  
    const buildDate = formatDateTime().buildDate
    return `
      buildDate: ${buildDate}\n
      ip地址: ${ip}\n
      当前分支名：${vName}\n
      提交的hash:${commitHash}\n
      提交人姓名：${name}\n
      提交日期：${date}\n
      提交描述：${message}
    `
  }

export default function BranchVersionPlugin(options?: PluginOptions): PluginOption {
  // 合并默认配置(通过 配置象实现)
  const config = {
    filename: 'version.txt',
    silent: false,
    VERSION_FILES: [
      'version.json', // 项目信息文件
      'version.txt', // 版本信息文件
    ],
    ...options,
   
  };

  return {
    name: 'vite-plugin-branch-version',
   
    // 使用 build 阶段的 generateBundle 钩子
    generateBundle() {
        // 核心 emitFile 调用
        // version.json 生成前端版本信息 - 通过读取package.json文件中version字段 写入
        // version.txt 项目打包生成txt文件-自动记录打包日期：git版本、当前分支、提交人姓名、提交日期、提交描述等信息
        config.VERSION_FILES.forEach(file => {
            this.emitFile({
              type: 'asset',
              fileName: file,
              source: file.endsWith('.json') 
                ? JSON.stringify(packageJson.version, null, 2) 
                : getBranchVersionInfo()
            });
          });
      // 核心 emitFile 调用
    //   this.emitFile({
    //     type: 'asset', //文件类型（asset/chunk）
    //     name: 'version-info',      // 唯一标识名称
    //     fileName: config.filename, // 输出文件名
    //     source: getBranchVersionInfo()            // 文件内容
    //   });
    }
  } as Plugin; // 类型断言确保兼容性
}
  • 在vite.config.ts文件中引入
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 分支版本信息
import BranchVersionPlugin from './webpack-plugin/branch-version-webpack-plugin'
import minimist from 'minimist';
// 解析命令行参数
const argv = minimist(process.argv.slice(2));
console.log(argv, 'argv');

// https://vite.dev/config/
export default defineConfig({
  plugins: [
      vue(), 
      BranchVersionPlugin()],
})
  • 打包在dist 目录下生成的version.txt 和 version.json 文件同上
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值