Vue3 项目修改index.html的 title

实现思路

通过插件 vite-plugins-html 进行参数配置，html 中使用参数，实现配置

安装插件

$ npm install vite-plugins-html --save-dev

vite.config.js 中的配置

// 可以动态处理html文件内容的
import { createHtmlPlugin } from 'vite-plugin-html'export default defineConfig(({command,mode})=>{return { // 使用插件进行配置，固定写法，就这么写plugins:[createHtmlPlugin({inject:{data:{// 这个就是要用到的参数title:"开发环境的标题",}}})]}
})

index.html 的内容

<title><%= title %></title>
上述语法使用 vite.config.js中的变量

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- <title>Document</title> --><title><%= title %></title>
</head>
<body>展示vite对静态图片-svg 的支持<br><!--引入main.js  --><script type="module" src="./main.js" ></script></body>
</html>

运行效果

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Echarts 实现两两柱图重叠(背景和实际值柱图)

Echarts 实现两两柱图重叠(背景和实际值柱图)

Echarts实现两两重叠柱状图_echarts 重叠柱状图_Web_阿凯的博客-CSDN博客 引用启发的博客 先来效果&#xff1a; option {backgroundColor: #03213D,animation: true, // 控制动画是否开启animationDuration: 1000, // 动画的时长, 它是以毫秒为单位animationDuration: func…
阅读更多...
KaiwuDB 监控组件及辅助 SQL 调优介绍

KaiwuDB 监控组件及辅助 SQL 调优介绍

一、介绍 KaiwuDB 具备完善的行为数据采集功能&#xff0c;此功能要求 KaiwuDB 数据库系统 C/E/T 端不同进程的不同维度的指标采集功能十分完善&#xff1b;在不同进程完成指标采集后&#xff0c;会通过 Opentelemetry 和 Collector 将指标存入 Prometheus&#xff0c;以便查找…
阅读更多...
KiCad源代码研究：KiCad是如何渲染和绘图的。

KiCad源代码研究：KiCad是如何渲染和绘图的。

common.json文件中appearance.show_scrollbars common.json对应于代码的common_settings 1.EDA_DRAW_PANEL_GAL类 EDA_DRAW_PANEL_GAL类中定义了绘图的基本要素&#xff1a; /// Interface for drawing objects on a 2D-surfaceKIGFX::GAL* m_gal;/// Stores v…
阅读更多...
主播三维能力总览

主播三维能力总览

主播需要的三维能力包括话术能力、成交能力和表现力 主播的话术能力 主播在直播过程中运用语言和表达方式的能力。好的话术能力可以帮助主播吸引观众、增加互动、提高直播效果等。 1.了解观众需求:在直播前&#xff0c;主播应该了解观众的需求和兴趣&#xff0c;以便在直播过…
阅读更多...
小程序商城免费搭建之java商城 电子商务Spring Cloud+Spring Boot+二次开发+mybatis+MQ+VR全景+b2b2c

小程序商城免费搭建之java商城 电子商务Spring Cloud+Spring Boot+二次开发+mybatis+MQ+VR全景+b2b2c

1. 涉及平台 平台管理、商家端&#xff08;PC端、手机端&#xff09;、买家平台&#xff08;H5/公众号、小程序、APP端&#xff08;IOS/Android&#xff09;、微服务平台&#xff08;业务服务&#xff09; 2. 核心架构 Spring Cloud、Spring Boot、Mybatis、Redis 3. 前端框架…
阅读更多...
98.qt qml-使用曲线图综合示例、支持多种鼠标交互、支持百万数据显示(已适配黑白风格)

98.qt qml-使用曲线图综合示例、支持多种鼠标交互、支持百万数据显示(已适配黑白风格)

在上章我们只是简单实现了曲线图和折线图的显示： 79.qt qml-如何在QML中使用QCustomPlot之曲线/折线示例(已适配黑白风格)_qml 折线图_诺谦的博客-CSDN博客 所以本章实现综合示例、并添加多种功能如下所示： 详细显示：鼠标任意移动显示具体值内容鼠标右击: 弹出菜单栏，支持…
阅读更多...
记一次解决Pyqt6/Pyside6添加QTreeView或QTreeWidget导致窗口卡死（未响应）的新路历程，打死我都想不到是这个原因

记一次解决Pyqt6/Pyside6添加QTreeView或QTreeWidget导致窗口卡死（未响应）的新路历程，打死我都想不到是这个原因

文章目录 💢 问题 💢🏡 环境 🏡📄 代码💯 解决方案 💯⚓️ 相关链接 ⚓️💢 问题 💢 我在窗口中添加了一个 QTreeWidget控件 ，但是程序在运行期间，只要鼠标进入到 QTreeWidget控件 内进行操作，时间超过几秒中就会出现窗口 未响应卡死的 状态 🏡 环境 �…
阅读更多...
智慧校园烟火识别及预警解决方案，保障校园消防安全

智慧校园烟火识别及预警解决方案，保障校园消防安全

一、方案背景 校园消防安全一直以来是社会各界备受关注的问题。为了保障师生的人身安全和财产安全&#xff0c;越来越多的学校开始引入AI智能检测技术&#xff0c;通过运用AI智能烟火检测技术&#xff0c;对学校的周界、教室、走廊、公共区域、教学楼、食堂等场所进行安全监测…
阅读更多...
世微 电动车摩托车灯 5-80V 1.2A 一切二降压恒流驱动器AP2915

世微 电动车摩托车灯 5-80V 1.2A 一切二降压恒流驱动器AP2915

产品描述 AP2915 是一款可以一路灯串切换两路灯串的降压恒流驱动器,高效率、外围简单、内置功率管&#xff0c;适用于5-80V 输入的高精度降压 LED 恒流驱动芯片。内置功率管输出最大功率可达 12W&#xff0c;最大电流 1.2A。AP2915 一路灯亮切换两路灯亮&#xff0c;其中一路灯…
阅读更多...
Leetcode 153. 寻找旋转排序数组中的最小值

Leetcode 153. 寻找旋转排序数组中的最小值

class Solution {//因为最小值和最大值总是相邻的&#xff08;除了初始状态&#xff09;//1.用二分查找&#xff0c;如果右侧是有序则最小值在左侧//2.如果右侧无序则最小值在右侧//如果mid正好是最小值&#xff0c;那么右侧自然是有序的&#xff0c;//为了将mid加入到搜索的一…
阅读更多...
Androidstudio 有显示刚刚打开的文件么

Androidstudio 有显示刚刚打开的文件么

Ctrl E
阅读更多...
windows上安装MySQL Server.

windows上安装MySQL Server.

进入官网 MySQL 找到 下载&#xff0c;并点进入。 往下翻&#xff0c;找到社区下载&#xff0c;进入页面 选择 Mysql community Server 选择系统&#xff0c;下载 之后解压。 将解压文件夹下的bin路径添加到变量值中 配置初始化的my.ini文件 [mysqld] # 设置3306端口 port330…
阅读更多...
Docker（镜像、容器、仓库）工具安装使用命令行选项及构建、共享和运行容器化应用程序

Docker（镜像、容器、仓库）工具安装使用命令行选项及构建、共享和运行容器化应用程序

文章目录 前言&#x1f31f;一、Docker工具安装&#x1f31f;二、Docker命令行选项&#x1f30f;2.1.docker run命令选项&#xff1a;&#x1f30f;2.2.docker build命令选项&#xff1a;&#x1f30f;2.3.docker images命令选项&#xff1a;&#x1f30f;2.4.docker ps命令选项…
阅读更多...
【日常总结】java JSON 转 实体类 (含多层嵌套)

【日常总结】java JSON 转 实体类 (含多层嵌套)

一、场景 二、问题 三、解决方案 四、实战 1. 引入maven依赖 2. IEDA 安装lombok 插件 3. 安装 GsonFormPlu 插件 4. 使用 Stage 1&#xff1a;新建类&#xff0c;右键 选择 Generate Stage 2&#xff1a;选择 GsonFormatPlus Stage 3&#xff1a;将json复制其中&…
阅读更多...
【Flink 问题集】The generic type parameters of ‘Collector‘ are missing

【Flink 问题集】The generic type parameters of ‘Collector‘ are missing

错误展示&#xff1a; Exception in thread "main" org.apache.flink.api.common.functions.InvalidTypesException: The return type of function main(CollectionDemo.java:33) could not be determined automatically, due to type erasure. You can give type in…
阅读更多...
研究前沿| Nature：艰难梭菌引发肠道神经源性炎症的新机制

研究前沿| Nature：艰难梭菌引发肠道神经源性炎症的新机制

前言 艰难梭菌感染&#xff08;Clostridioides difficile infection&#xff09;是目前发达国家医院和社区内获得性肠道细菌感染腹泻的最主要原因之一。在美国&#xff0c;每年有约50万例病例和导致约29,000例死亡。艰难梭菌&#xff08;C. difficile&#xff09;是一种产生孢子…
阅读更多...
sftp 从windows10向linux（centos7）传输文件

sftp 从windows10向linux（centos7）传输文件

前言背景&#xff1a;该示例是需要从windows10向本地linux系统传输一个qt安装文件&#xff0c;不想或者无法安装xftp这些传输工具&#xff0c;直接通过命令传输&#xff1b; 首先保证windows10 ping通linux系统ip&#xff0c;linux ping 通windows10系统&#xff1b; 注意&am…
阅读更多...
基于ssm图书馆座位预约系统

基于ssm图书馆座位预约系统

jdk1.8 tomcat8.0 mysql5.7
阅读更多...
Linux：动静态库

Linux：动静态库

目录 一、软硬链接 1、软链接 2、硬链接 二、动态库和静态库 编写一个库 ①静态库 使用静态库的方法 ②动态库 使用动态库的方法 库存在的意义 一、软硬链接 软硬链接的本质区别就是&#xff1a;有无独立的inode 软链接有独立的inode&#xff0c;也就意味着软链接是一…
阅读更多...
Java(三)(static,代码块,单例设计模式,继承)

Java(三)(static,代码块,单例设计模式,继承)

目录 static 有无static修饰的成员变量 有无static修饰的成员方法 static的注意事项 代码块 静态代码块 实例代码块 单例设计模式 饿汉式单例写法 懒汉式单例写法 继承 基本概念 注意事项 权限修饰符 单继承 object 方法重写 子类方法中访问其他成员(成员变量…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023