vue/react/vite前端项目打包的时候加上时间最简单版本,防止后端扯皮

news2025/3/15 7:00:58

如果你是vite项目,直接写一个vite的插件,通过这个插件可以动态注入环境变量,然后当打包的时候,自动注入这个时间到环境变量中,然后在项目中App.vue中或者Main.tsx中打印出来,这就知道是什么时候编译的项目了,防止扯皮

在项目根目录创建一个文件夹然后创建一个vite插件:

插件代码如下: 

// 自定义 Vite 插件,用于生成时间并注入环境变量
export default function buildTimePlugin() {
    return {
        name: 'build-time-plugin',
        config: () => {
            // 获取当前时间
            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}`
            return {
                define: {
                    // 将时间注入到环境变量中
                    'import.meta.env.BUILD_TIME': JSON.stringify(formattedTime),
                },
            }
        },
    }
}

然后在vite.config.ts中加入配置:

这个时候在项目中打印这个环境变量就好了:

启动项目,然后就可以看到打印的时间了:

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Cadence学习笔记3

设置 PCB 层叠 初始我们有一个两层板,如果需要添加层叠怎么办? 点击进入层叠设置 首先右击 TOP 层下面的空白,然后鼠标右键进行 add layer 然后选择 Plane(一般层就是这个) 就好 然后 add就行 设置光标显示形式 在 setup ->…

Linux系统下如何部署svmspro平台

上传svmspro服务 rz回车后选择svmspro.zip上传如果提示rz命令未找到,请先运行 yum install -y lrzsz 安装将svmspro.zip解压出来,并拷贝到/usr/目录下,命令如下: unzip svmspro.zip//解压程序包cp svmspro /usr/ -r//将svmspro文件…

vue3:八、登录界面实现-忘记密码

一、页面效果 二、实现 1、视图层 <el-form-item class"flex flex-between"><el-checkbox label"记住密码" v-model"remember" /> </el-form-item> 参考 Checkbox 多选框 | Element Plus 2、逻辑层 首先设置记住密码的变…

el-table树形表格合并相同的值

el-table树形表格合并相同的值 el-table树形表格合并相同的值让Ai进行优化后的代码 el-table树形表格合并相同的值 <style lang"scss" scoped> .tableBox {/deep/ &.el-table th:first-child,/deep/ &.el-table td:first-child {padding-left: 0;} } …

Apache Tomcat漏洞,对其进行升级

我们付出一些成本&#xff0c;时间的或者其他&#xff0c;最终总能收获一些什么。 升级背景&#xff1a; 近日&#xff0c;新华三盾山实验室监测到 Apache 官方修复了一个远程代码执行漏洞 (CVE-2025-24813) &#xff0c;其CVSS3 漏洞评分为 7.5 。 影响范围 9.0.0.M1 ≤…

工程实践:如何使用SU17无人机来实现室内巡检任务

阿木实验室最近发布了科研开发者版本的无人机SU17&#xff0c;该无人机上集成了四目视觉&#xff0c;三维激光雷达&#xff0c;云台吊舱&#xff0c;高算力的机载计算机&#xff0c;是一个非常合适的平台用于室内外巡检场景。同时阿木实验室维护了多个和无人机相关的开源项目。…

OSPF-3 1类LSA Router LSA

前面两期我们介绍了OSPF的邻居与邻接建立的关系及失败因素和原因 这章我们来说说OSPF是如何通过不同的LSA去描述拓扑的信息以及路由信息 一、概述 OSPF通过不同的LSA来构成LSDB链路状态数据库,再通过SPF算法来计算出最优的最短路径 二、LSA的分类 类型名称描述传播范围1类…

【清华大学第七版】DeepSeek赋能家庭教育的实操案例(批改作文+辅助语文/数学/科学学习+制定学习计划)

我用夸克网盘分享了「DeepSeek完整资料合集」&#xff0c;点击链接即可保存。打开「夸克APP」&#xff0c;无需下载在线播放视频&#xff0c;畅享原画5倍速&#xff0c;支持电视投屏。 链接&#xff1a;https://pan.quark.cn/s/621259e4af15 近日&#xff0c;清华大学发布了《…

HCIA-ACL实验

前提条件&#xff1a;实现底层互通 转发层面 1、基本ACL ①要求PC3不能访问网段192.168.2.0的网段&#xff0c;PC4和客户端能正常访问服务器 ②AR2配置 acl 2000 rule deny source 192.168.1.1 0 匹配流量 int g 0/0/0 traffic-filter inbound acl 2000 接口调用…

DeepLabv3+改进10:在主干网络中添加LSKBlock|动态调整其大型空间感受野,助力小目标识别

🔥【DeepLabv3+改进专栏!探索语义分割新高度】 🌟 你是否在为图像分割的精度与效率发愁? 📢 本专栏重磅推出: ✅ 独家改进策略:融合注意力机制、轻量化设计与多尺度优化 ✅ 即插即用模块:ASPP+升级、解码器 PS:订阅专栏提供完整代码 目录 论文简介 步骤一 步骤二…

词向量:优维大模型语义理解的深度引擎

★ 放闸溯源 优维大模型「骨架级」技术干货 第二篇 ⇓ 词向量是Transformer突破传统NLP技术瓶颈的核心&#xff0c;它通过稠密向量空间映射&#xff0c;将离散符号转化为连续语义表示。优维大模型基于词向量技术&#xff0c;构建了运维领域的“语义地图”&#xff0c;实现从…

编译原理:语法分析程序【附源码和超详细注释】

目录 一 、实验目的 二 、实验内容及步骤 三、程序分析 1. 需求分析 2. 功能分析 1. LL(1)文法功能分析 2. 算符优先文法功能分析 3. 信创分析-主要针对能力提升中国产操作系统上开发内容。 四、源代码 1. LL(1)文法代码 2. 算符优先文法 五、测试结果 1. LL(1)文…

使用Flask和OpenCV 实现树莓派与客户端的视频流传输与显示

使用 Python 和 OpenCV 实现树莓派与客户端的视频流传输与显示 在计算机视觉和物联网领域&#xff0c;经常需要将树莓派作为视频流服务器&#xff0c;通过网络将摄像头画面传输到客户端进行处理和显示。本文将详细介绍如何利用picamera2库、Flask 框架以及 OpenCV 库&#xff…

fs的proxy_media模式失效

概述 freeswitch是一款简单好用的VOIP开源软交换平台。 在fs的使用过程中&#xff0c;某些场景只需要对rtp媒体做透传&#xff0c;又不需要任何处理。 在fs1.6的版本中&#xff0c;我们可以使用proxy_media来代理媒体的转发&#xff0c;媒体的协商由AB路端对端处理&#xff…

Linux 命名管道

文章目录 &#x1f680; 深入理解命名管道&#xff08;FIFO&#xff09;及其C实现一、命名管道核心特性1.1 &#x1f9e9; 基本概念 二、&#x1f4bb; 代码实现解析2.1 &#x1f4c1; 公共头文件&#xff08;common.hpp&#xff09;2.2 &#x1f5a5;️ 服务器端&#xff08;s…

HDU 学数数导致的

题目解析 首先&#xff0c;数对是有序的&#xff0c;<1,2>和<2,1>被视为不同的两组数字。 其次&#xff0c;数对<p,q>的p和q可以相等。 子序列为 p 0 p q&#xff0c;观察到&#xff0c;中间要出现一个0。那么&#xff0c;我们只需要找到第一个 p 满足与前…

软件/硬件I2C读写MPU6050

MPU6050简介 6轴&#xff1a;3轴加速度&#xff0c;3轴角速度 9轴&#xff1a;3轴加速度&#xff0c;3轴角速度和3轴磁场强度 10轴&#xff1a;3轴加速度&#xff0c;3轴角速度和3轴磁场强度和一个气压强度 加速度计具有静态稳定性&#xff0c;不具有动态稳定性 欧拉角&…

Android中的Wifi框架系列

Android wifi框架图 Android WIFI系统引入了wpa_supplicant&#xff0c;它的整个WIFI系统以wpa_supplicant为核心来定义上层接口和下层驱动接口。 Android WIFI主要分为六大层&#xff0c;分别是WiFi Settings层&#xff0c;Wifi Framework层&#xff0c;Wifi JNI 层&#xff…

【含文档+PPT+源码】基于Python的图书管理系统的设计与实现

项目介绍 本课程演示的是一款基于Python的图书管理系统的设计与实现&#xff0c;主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的 Java 学习者。 包含&#xff1a;项目源码、项目文档、数据库脚本、软件工具等所有资料 带你从零开始部署运行本套系统 该项目附…

开源工具利器:Mermaid助力知识图谱可视化与分享

在现代 web 开发中&#xff0c;可视化工具对于展示流程、结构和数据关系至关重要。Mermaid 是一款强大的 JavaScript 工具&#xff0c;它使用基于 Markdown 的语法来呈现可定制的图表、图表和可视化。对于展示流程、结构和数据关系至关重要。通过简单的文本描述&#xff0c;你可…