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"
相关推荐
01传说11 分钟前
vue3 配置安装 pnpm 报错 已解决
java·前端·vue.js·前端框架·npm·node.js
Misha韩17 分钟前
React Native 一些API详解
react native·react.js
小李飞飞砖17 分钟前
React Native 组件间通信方式详解
javascript·react native·react.js
小李飞飞砖18 分钟前
React Native 状态管理方案全面对比
javascript·react native·react.js
烛阴1 小时前
Python装饰器解除:如何让被装饰的函数重获自由?
前端·python
千鼎数字孪生-可视化2 小时前
Web技术栈重塑HMI开发:HTML5+WebGL的轻量化实践路径
前端·html5·webgl
凌辰揽月2 小时前
7月10号总结 (1)
前端·css·css3
天天扭码2 小时前
很全面的前端面试——CSS篇(上)
前端·css·面试
EndingCoder2 小时前
搜索算法在前端的实践
前端·算法·性能优化·状态模式·搜索算法
sunbyte2 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue