首页 > 其他分享 >vue3 vite.config.ts 如何增加构建时间,并展示在index.html里面

vue3 vite.config.ts 如何增加构建时间,并展示在index.html里面

时间:2023-12-09 17:55:20浏览次数:34  
标签:index ts html vue3 config vite

  1. 首先需要安装vite-plugin-html插件
  2. 在vite.config.ts文件中增加如下代码:
plugins: [
  createHtmlPlugin({
     minify: true,
     pages: [
       {
         template: 'index.html',
         filename: 'index.html',
         injectOptions: {
           data: {
             title: 'vite-app',
             buildTime: new Date().toLocaleString()
           }
         }
      }
    ]
  })
],
  1. index.html里面如何使用?
<meta name="build-time" content="<%- buildTime%>" />
<title><%- title%></title>

标签:index,ts,html,vue3,config,vite
From: https://www.cnblogs.com/wjs0509/p/17891258.html

相关文章

  • 前端:bootstrap基本样式,css3定位,响应式布局
    前端:bootstrap基本样式,css3定位,响应式布局Css3中的position属性:css3的定位方式Css3的几种定位方式:流定位、浮动定位、相对定位、绝对定位、固定定位,默认为流定位。流定位页面中的块级元素框从上到下一个接一个地排列。每一个块级元素都会出现在一个新行中(比如<p>元素、<div>元素)。......
  • robots.txt禁止收录协议写法
    1. 什么是robots.txt?robots.txt 是网站和搜索引擎的协议的纯文本文件。当一个搜索引擎蜘蛛来访问站点时,它首先爬行来检查该站点根目录下是否存在robots.txt,如果存在,根据文件内容来确定访问范围,如果没有,蜘蛛就沿着链接抓取。robots.txt 放在项目的根目录下。2. robots.txt......
  • requirements.txt
    参考Python中的requirement.txtPython中的依赖Python需要维护项目相关的依赖包。通常我们会在项目的根目录下放置一个requirements.txt文件,用于记录所有依赖包和它的确切版本号。requirements.txt的内容长这样:alembic==1.0.10appnope==0.1.0astroid==2.2.5attrs==1......
  • 7. 2023-11-20 12:29:32,542 [tornado.general :456 ][WARNING ][3052] Got events f
     这个警告表明Tornado检测到了有事件(events)被发送到一个已经关闭的流(stream)。在Tornado中,一个流代表一个请求或响应的数据流。这个警告可能意味着在请求处理的过程中,尝试向已经关闭的流发送了事件。可能的原因和解决方法:异步操作处理不当:在Tornado中,当你处理异步请求时,需......
  • 关于键盘导航顺序和 tabindex 属性的关联关系
    "tabindex"属性是HTML元素中的一个属性,用于定义元素在通过键盘导航时的顺序。该属性接受一个整数值,通常为正整数,用于指定元素的tab键顺序。但是,当"tabindex"属性的值为-1时,它有特殊的含义。当"tabindex"的值为-1时,它表示该元素虽然可以通过JavaScript聚焦,但在通过按下Tab键进行导......
  • HTML常用表单元素使用?
    ##表单的基本语法```<formaction="表单提交地址"method="提交方法">…文本框、按钮等表单元素…</form>```###表单属性:-action将表单数据提交到指定地址-method表单数据发送至服务器的方法,常用的有两种get(默认)/post。###get和post的区别-get:从指定的资源......
  • HTML中的三个列表,具体的使用及列表样式
    HTML有三种列表:##一、有序列表有序列表(Orderedlists):用数字或字母来标记列表项,每个列表项前会有一个数字或字母。```html<ol><li>列表项1</li><li>列表项2</li><li>列表项3</li></ol>```##二、无序列表无序列表(Unorderedlists):用符号来标记列表项,每个列表项前会有一个......
  • [CF958F3] Lightsabers (hard)
    题目链接对于一种元素\(v\),假设它在给出可重集合中出现了\(t\)次,那么容易把它表示成基础的生成函数形式:\(1+x+x^2+x^3+\dots+x^t\)。显然,把所有元素的生成函数卷一下就是答案。但是这样最坏情况为\(O(nm\logn)\)的,不能通过这道题。在思考优化方式时,容易想到启发式合并来优......
  • HTML笔记
    1.什么是HTMl:HTML(HyperTextMarkupLanguage)是一种用于创建网页的标准标记语言。它使用一系列标签来定义网页的结构、内容和样式。HTML文档由一系列的元素组成,这些元素包括标题、段落、链接、图片、列表等。通过使用HTML标签,开发者可以创建出具有交互性和动态效果的网页。2.HTML......
  • WhatsApp群发功能的代码揭秘
    随着社交媒体的普及,WhatsApp作为一款全球性的即时通讯工具,已经成为人们生活中不可或缺的一部分。今天,我们将为您揭秘WhatsApp群发功能的代码,帮助您更好地了解这一方便快捷的通讯方式。一、WhatsApp群发功能简介WhatsApp群发功能可以让用户将一条消息发送给多个接收者,这一功能对于商......