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.pswp.cn/bicheng/81638.shtml
繁體地址，請注明出處：http://hk.pswp.cn/bicheng/81638.shtml
英文地址，請注明出處：http://en.pswp.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