当前位置：首页 > news >正文

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

news 来源：原创 2025/5/20 6:02:21

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() + 1const 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-varsconst 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 hashconst 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()// ipconst ip = needHostconst buildDate = getNowDate()return `buildDate: ${buildDate}\nip地址: ${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:44ip地址: 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.jsoninterface 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 hashconst 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()// ipconst ip = needHostconst buildDate = formatDateTime().buildDatereturn `buildDate: ${buildDate}\nip地址: ${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()],
})