vue/react前端项目打包的时候加上时间,防止后端扯皮

在前端项目(Vue/React)打包时,将打包时间注入到项目中,可以有效防止前后端扯皮,尤其是在部署和调试时能够明确知道当前运行的代码版本和打包时间。以下是实现方案

在index.html中加入时间模板:

复制代码
<div style="display: none">PUBLISHTIME</div>

安装一个文件管理依赖:

javascript 复制代码
pnpm install fs-extra -D

然后新建一个script文件夹用于存储编译脚本,并存储编译脚本:

将里面的buildCmd替换为自己的命令

javascript 复制代码
const fs = require('fs-extra')
const path = require('path')
const { exec } = require('child_process')

const buildCmd = 'pnpm run test'

const updateDeployTime = () => {
    const indexHtml = path.join(__dirname, '../index.html')
    let content = fs.readFileSync(indexHtml, 'utf-8')
    if (content.includes(`PUBLISHTIME`)) {
        var currentTime = new Date()
        // 提取年、月、日、时、分、秒
        var year = currentTime.getFullYear() // 年
        var month = String(currentTime.getMonth() + 1).padStart(2, '0')
        var day = String(currentTime.getDate()).padStart(2, '0') // 日
        var hours = String(currentTime.getHours()).padStart(2, '0') // 时
        var minutes = String(currentTime.getMinutes()).padStart(2, '0') // 分
        var seconds = String(currentTime.getSeconds()).padStart(2, '0') // 秒
        // 拼接成 YYYY-MM-DD HH:mm:ss 格式
        var formattedTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
        console.log('currentTime', formattedTime)
        content = content.replace('PUBLISHTIME', `build time: ${formattedTime}`)
        fs.writeFileSync(indexHtml, content)
        console.log(`Updated time in: ${indexHtml}`)
    }
}

const deleteDistFolder = () => {
    const distFolder = path.join(__dirname, '../dist')
    if (fs.existsSync(distFolder)) {
        fs.remove(distFolder)
        console.log(`Deleted folder: ${distFolder}`)
    } else {
        console.log(`Folder does not exist: ${distFolder}`)
    }
}

const testBuild = () => {
    // Step 1: Run the build command
    console.log('Starting build process...')
    exec(buildCmd + ' && git restore .', (error, stdout, stderr) => {
        if (error) {
            console.error(`Build error: ${error.message}`)
            return
        }
        if (stderr) {
            console.error(`Build stderr: ${stderr}`)
        }
        console.log(`Build stdout: ${stdout}`)
        console.log('Build process complete.')
    })
}

// 从命令行获取新服务的名称
exec('git add .', (error, stdout, stderr) => {
    // del dist folder
    deleteDistFolder()
    // update build time
    updateDeployTime()
    // run build test command
    testBuild()
    // upload dist folder to server
})

然后在package.json里面添加编译命令:

javascript 复制代码
"pub:test": "node scripts/test.cjs",
"pub:prod": "node scripts/prod.cjs"
相关推荐
Penk是个码农3 分钟前
web前端面试-- MVC、MVP、MVVM 架构模式对比
前端·面试·mvc
markyankee1015 分钟前
Vue.js 入门指南:从零开始构建你的第一个应用
vue.js
MrSkye7 分钟前
🔥JavaScript 入门必知:代码如何运行、变量提升与 let/const🔥
前端·javascript·面试
白瓷梅子汤11 分钟前
跟着官方示例学习 @tanStack-form --- Linked Fields
前端·react.js
爱学习的茄子15 分钟前
深入理解JavaScript闭包:从入门到精通的实战指南
前端·javascript·面试
zhanshuo1 小时前
不依赖框架,如何用 JS 实现一个完整的前端路由系统
前端·javascript·html
火柴盒zhang1 小时前
websheet在线电子表格(spreadsheet)在集团型企业财务报表中的应用
前端·html·报表·合并·spreadsheet·websheet·集团财务
khalil1 小时前
基于 Vue3实现一款简历生成工具
前端·vue.js
拾光拾趣录1 小时前
浏览器对队头阻塞问题的深度优化策略
前端·浏览器
用户8122199367221 小时前
[已完结]后端开发必备高阶技能--自研企业级网关组件(Netty+Nacos+Disruptor)
前端