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

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()],
})
  • 打包在dist 目录下生成的version.txt 和 version.json 文件同上

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/81638.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Filament引擎(一) ——渲染框架设计

Filament引擎(一) ——渲染框架设计

filament是谷歌开源的一个基于物理渲染(PBR)的轻量级、高性能的实时渲染框架&#xff0c;其框架架构设计并不复杂&#xff0c;后端RHI的设计也比较简单。重点其实在于项目中材质、光照模型背后的方程式和理论&#xff0c;以及对它们的实现。相关的信息&#xff0c;可以参考官方…
阅读更多...
洛谷B3876—— [信息与未来 2015] 中间值

洛谷B3876—— [信息与未来 2015] 中间值

见&#xff1a;B3876 [信息与未来 2015] 中间值 - 洛谷 题目描述 给出一个正整数 n&#xff0c;生成长度为 n 的数列 a&#xff0c;其中 ai​i(1≤i≤n)。 若 n 为奇数&#xff0c;则输出 a 的中间数&#xff08;位于 a 正中位置的数&#xff09;&#xff1b;若 n 为偶数&am…
阅读更多...
Java 后端基础 Maven

Java 后端基础 Maven

Maven 1.什么是Maven 2.Maven的作用 Maven核心 Maven概述 IDEA集成Maven 1.创建Maven项目 点击设置里的 Project Structure 将jdk和编译语言进行设置 随后点击apply点击ok 2.Maven坐标 3.导入Maven项目 将文件夹复制到当前项目的目录下 在这个目录下&#xff0c;在磁盘中…
阅读更多...
qtcreater配置opencv

qtcreater配置opencv

我配置opencv不管是按照网上的教程还是deep seek发现都有些问题&#xff0c;下面是我的配置方法以及实践成功的心得 电脑环境 windows平台qt6 下载 我这里直接提供官网下载地址&#xff1a;https://opencv.org/releases/ 我下载的是最新版&#xff0c;下载后是一个.exe文件…
阅读更多...
单片机-STM32部分：15、直流电机与步进电机 PWM/IO

单片机-STM32部分：15、直流电机与步进电机 PWM/IO

飞书文档https://x509p6c8to.feishu.cn/wiki/InUfwEeJNimqctkyW1mcImianLh 一、步进电机与直流电机&#xff1a; 1-1、什么是直流电机&#xff1f; 直流电机是最常见的电机类型。直流电动机通常只有两个引线&#xff0c;一个正极和一个负极。直流电机的转速控制主要依靠改变输…
阅读更多...
「佰傲再生医学」携手企企通，解锁企业采购供应链数字化新体验

「佰傲再生医学」携手企企通，解锁企业采购供应链数字化新体验

健康&#xff0c;是人类美好生活的基石。随着“健康中国2030”规划的深入推进&#xff0c;生物医药和再生医学等前沿技术快速崛起&#xff0c;已成为促进全民健康、提升生命质量的重要支撑&#xff0c;为健康事业注入了新的希望和动力。 一、佰傲再生医学&#xff0c;让每个人…
阅读更多...
PyTorch Geometric（PyG）：基于PyTorch的图神经网络（GNN）开发框架

PyTorch Geometric（PyG）：基于PyTorch的图神经网络（GNN）开发框架

PyTorch Geometric&#xff08;PyG&#xff09;&#xff1a;基于PyTorch的图神经网络&#xff08;GNN&#xff09;开发框架 一、PyG核心功能全景图 PyTorch Geometric&#xff08;PyG&#xff09;是基于PyTorch的图神经网络&#xff08;GNN&#xff09;开发框架&#xff0c;专…
阅读更多...
亮相戛纳电影节、北京电影节的影星

亮相戛纳电影节、北京电影节的影星

​17日&#xff0c;由高圆圆、古天乐主演的《风林火山》剧组&#xff0c;在第78届戛纳影展上走红毯亮相&#xff0c;记者争相拍照&#xff0c;风光无限。 值得关注的是&#xff0c;导演麦浚龙以一身黑色晚礼服踏上红毯&#xff0c;微笑间显得踌躇滿志&#xff1b;古天乐则以白色…
阅读更多...
Django框架的前端部分使用Ajax请求一

Django框架的前端部分使用Ajax请求一

Ajax请求 目录 1.ajax请求使用 2.增加任务列表功能(只有查看和新增) 3.代码展示集合 这篇文章, 要开始讲关于ajax请求的内容了。这个和以前文章中写道的Vue框架里面的axios请求, 很相似。后端代码, 会有一些细节点, 跟前几节文章写的有些区别。 一、ajax请求使用 我们先…
阅读更多...
IP地址代理公司：服务模式与行业应用探析

IP地址代理公司：服务模式与行业应用探析

随着数据驱动型经济的快速发展和互联网应用的普及&#xff0c;IP地址代理服务逐渐成为支持多种网络业务的重要组成部分。近年来&#xff0c;提供代理IP服务的公司遍地开花&#xff0c;这一市场强调供给的技术深度和服务灵活性&#xff0c;而代理IP公司本身也逐步从单一的技术供…
阅读更多...
C语言练手磨时间

C语言练手磨时间

167. 两数之和 II - 输入有序数组 给你一个下标从 1 开始的整数数组 numbers &#xff0c;该数组已按 非递减顺序排列 &#xff0c;请你从数组中找出满足相加之和等于目标数 target 的两个数。如果设这两个数分别是 numbers[index1] 和 numbers[index2] &#xff0c;则 1 <…
阅读更多...
本地部署Firecrawl+Dify调用踩坑记录

本地部署Firecrawl+Dify调用踩坑记录

最近自己研究Dify&#xff0c;使用到Firecrawl这个比较好用的工具。用Firecrawl官网的不知道为什么总是卡住得不到结果&#xff0c;于是我打算自己去本地部署一个。好家伙真给我人搞麻了&#xff0c;太多问题了。 我是在京东云上面租的一台服务器。 首先就是docker的安装&…
阅读更多...
iOS SwiftUI的具体运用实例（SwiftUI库的运用）

iOS SwiftUI的具体运用实例（SwiftUI库的运用）

最近接触到一个 SwiftUI的第三方框架&#xff0c;它非常的好用。以下是 具体运用实例&#xff0c;结合其核心功能与开发场景&#xff0c;分多个维度进行详细解析&#xff1a; 一、基础 UI 组件开发 登录界面 SwiftUI 的 VStack、TextField 和 Button 可快速构建用户登录表单。例…
阅读更多...
【C++】模板上(泛型编程) —— 函数模板与类模板

【C++】模板上(泛型编程) —— 函数模板与类模板

文章目录 一、啥是泛型编程二、函数模板2.1、函数模板的概念2.2、函数模板的格式2.3、函数模板的原理2.4、函数模板的实例化2.4.1、隐式实例化&#xff1a;让编译器根据实参推演模板参数的实际类型2.4.2、显示实例化&#xff1a;在函数名后的<>中指定模板参数的实际类型 …
阅读更多...
语音识别-2

语音识别-2

目录 1.蓝牙优化 1.打开sco 2.外放时的蓝牙的不同版本适配 2.微软文本转语音优化 1.异步文本转语音 2.语音的个性化 上一篇关于语音识别, 虽然能用,但在系统适配,机器适配方面,速度,性能等还是有优化的地方.所以这篇是关于这些的. 1.蓝牙优化 A2DP：是一种单向的高品质音…
阅读更多...
【springcloud学习(dalston.sr1)】服务消费者通过restTemplate来访问服务提供者（含源代码）（五）

【springcloud学习(dalston.sr1)】服务消费者通过restTemplate来访问服务提供者（含源代码）（五）

该系列项目整体介绍及源代码请参照前面写的一篇文章​​​​​​【springcloud学习(dalston.sr1)】项目整体介绍&#xff08;含源代码&#xff09;&#xff08;一&#xff09; springcloud学习&#xff08;dalston.sr1&#xff09;系统文章汇总如下&#xff1a; 【springcloud…
阅读更多...
小白学编程之——数据库如何性能优化

小白学编程之——数据库如何性能优化

小白学编程之——数据库性能优化指南 数据库如同一个大型仓库&#xff0c;性能优化就是帮助仓库管理员&#xff08;数据库&#xff09;更高效地存取货物&#xff08;数据&#xff09;。本文将以通俗易懂的方式&#xff0c;带你避开常见误区&#xff0c;让数据库运行得更快更稳…
阅读更多...
SQLMesh信号机制详解：如何精准控制模型评估时机

SQLMesh信号机制详解：如何精准控制模型评估时机

SQLMesh的信号机制为数据工程师提供了更精细的模型评估控制能力。本文深入解析信号机制的工作原理&#xff0c;通过简单和高级示例展示如何自定义信号&#xff0c;并提供实用的使用技巧和测试方法&#xff0c;帮助读者优化数据管道的调度效率。 一、为什么需要信号机制&#xf…
阅读更多...
FreeSWITCH 简单图形化界面43 - 使用百度的unimrcp搞个智能话务台，用的在线的ASR和TTS

FreeSWITCH 简单图形化界面43 - 使用百度的unimrcp搞个智能话务台，用的在线的ASR和TTS

FreeSWITCH 简单图形化界面43 - 使用百度的unimrcp搞个智能话务台 0、一个fs的web配置界面预览1、安装unimrcp模块2、安装完成后&#xff0c;配置FreeSWITCH。2.1 有界面的配置2.1.1 mod_unimrcp模块配置2.1.2 mod_unimrcp客户端配置 2.2 无界面的配置 3、呼叫规则4、编写流程4…
阅读更多...
【架构】RUP统一软件过程：企业级软件开发的全面指南

【架构】RUP统一软件过程：企业级软件开发的全面指南

一、RUP概述 RUP(Rational Unified Process&#xff0c;统一软件过程)是由Rational Software公司(后被IBM收购)开发的一种迭代式软件开发过程框架。它结合了传统瀑布模型的系统性和敏捷方法的灵活性&#xff0c;为中大型软件项目提供了全面的开发方法论。 RUP不仅仅是一种过程…
阅读更多...
最新文章

Copyright @ 2022~2023