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"
相关推荐
一斤代码5 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子5 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年5 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子6 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina6 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路7 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_7 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
甜瓜看代码7 小时前
1.
react.js·node.js·angular.js
伍哥的传说7 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409197 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app