当前位置： 首页 > news >正文

Vite - 配置 - 自动修改 index.html 中的title

news 2026/2/20 14:37:42

需求描述

在Vue3项目的开发过程中，我们为了能区分正式环境和测试环境，
通常会进行环境配置文件的区分，
例如，开发环境一个配置文件、生产环境一个配置文件。因此，我们就希望 在项目的index.html 的 title 标签中，能够根据配置文件中的配置显示不同的标题。
例如 ： 开发环境下 展示的标题是 ： 【开发环境标题】生产环境下 展示的标题是 ：【正式环境标题】

实现思路

vue3 项目默认使用的是 vite 进行项目的构建和管理，
因此本文介绍 vite中的配置。核心 ： 使用 vite-plugins-html 这个插件进行变量的配置，在html中使用变量即可。

插件安装

因为是只在开发时用到，所以只需要将依赖安装到开发时依赖中就行。
插件的引入方式 import { createHtmlPlugin } from 'vite-plugin-html'
插件变量的使用语法 ： <%= 变量名 => ，这个语法是 ejs 模板语法，就这么写就行

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

项目结构

此处的项目结构只展示了主要的内容

study-vite| -- environment| -- vite.base.config.js    # vite的通用配置文件，本案例中无特殊内容| -- vite.dev.config.js     # vite 的开发环境的配置文件 | -- vite.prod.config.js    # vite的生产环境的配置文件| -- index.html                 # 项目的入口页面，就是要修改这个的title| -- package.json               # 此文件重点看启动脚本| -- vite.config.js             # vite的主配置文件

文件内容

vite.base.config.js

无特殊配置 - 就是一个空的配置

/*** 基础环境配置，目前来讲还没有配置任何的内容*/import { defineConfig } from "vite"export default defineConfig({})

vite.dev.config.js

这个文件中引入了 vite-plugins-html 插件，进行了参数的配置

// 开发环境的配置，目前来讲还没有配置任何的内容
import { defineConfig } from "vite"// 可以动态处理html文件内容的
import { createHtmlPlugin } from 'vite-plugin-html'export default defineConfig({ plugins:[ // plugins 表示插件// 使用修改html 的插件createHtmlPlugin({inject:{data:{// 定义了一个title 变量，可以被html中进行引用title:"开发环境的标题",}}})]
})

vite.prod.config.js

这个文件中引入了 vite-plugins-html 插件，进行了参数的配置

// 生产环境的配置，目前来讲还没有配置任何的内容
import { defineConfig } from "vite"// 可以动态处理html文件内容的
import { createHtmlPlugin } from 'vite-plugin-html'export default defineConfig({ plugins:[ // plugins 表示插件// 使用修改html 的插件createHtmlPlugin({inject:{data:{// 定义了一个title 变量，可以被html中进行引用title:"正式环境的标题",}}})]
})

vite.config.js

主要是根据启动脚本的参数加载不通的配置文件
我感觉着这种写法还是非常的优雅的，哈哈哈


import { defineConfig } from "vite"
// 读取环境变量的
import { loadEnv } from "vite"// 引入三个环境配置文件
import ViteBaseConfig from "./environment/vite.base.config"
import ViteProdConfig from "./environment/vite.prod.config"
import ViteDevConfig from "./environment/vite.dev.config"// 策略模式做一个动态的配置
const envResolver = {"build":()=>{console.log("生产环境")// 解构的语法return ({...ViteBaseConfig,...ViteProdConfig})},"serve":()=>{console.log("开发环境")// 另一种写法return Object.assign({},ViteBaseConfig,ViteDevConfig)}
}// 根据 参数 command 的值，使用不同的环境配置文件
export default defineConfig(({command,mode})=>{// 根据不同的环境使用不同的配置文件,注意这个地方的写法，非常的奇特return envResolver[command]()
})

index.html

<!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>

package.json

摘取了主要的命令
npm run dev: 执行开发环境
npm run prod: 执行生产环境的打包

  "scripts": {"dev": "vite","prod": "vite build"},

运行测试

开发环境运行

$ npm run dev

在这里插入图片描述

生产环境打包

$ npm run prod

打包之后，我们可以看到输出的index.html中title已经直接被替换了，没有问题

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>正式环境的标题</title>
<script type="module" crossorigin src="/assets/index-5a650527.js"></script>
</head>
<body>
展示vite对静态图片-svg 的支持
<br>
</body>
</html>

在这里插入图片描述

相关文章：

Vite - 配置 - 自动修改 index.html 中的title

需求描述 在Vue3项目的开发过程中&#xff0c;我们为了能区分正式环境和测试环境&#xff0c; 通常会进行环境配置文件的区分&#xff0c; 例如&#xff0c;开发环境一个配置文件、生产环境一个配置文件。因此&#xff0c;我们就希望 在项目的index.html 的 title 标签中&…...

编程日记 2023/11/21 21:13:47

基于安卓android微信小程序美容理发店预约系统app

项目介绍 为美容院设计一个系统以减少员工的工作量就成为了想法的初始状态。紧接着对美容院进行进一步的调查发现我的想法已然落后。基本上每个美容院都以有了自己的信息系统&#xff0c;并且做的已经较完善了。 在这时我突然想到&#xff0c;现在关注美容养生的人越来越多&am…...

编程日记 2023/11/21 21:12:47

*** stack smashing detected ***: terminated

有一个函数返回值是bool类型&#xff0c;但忘了return了&#xff0c;编译可以通过&#xff0c;但是运行的时候报这个错误。...

编程日记 2023/11/21 21:10:43

鸿蒙系统扫盲（二）：再谈鸿蒙是不是安卓套壳？

最近小米发布了澎湃OS&#xff0c;vivo发布了蓝OS&#xff0c;好像自从华为回归后&#xff0c;大伙都开始写自己的OS了&#xff0c;小米官方承认是套壳安卓&#xff0c;然后被大家喷了&#xff0c;于是鸿蒙是不是安卓套壳的话题又回到了大众的视野&#xff0c;今天在讨论下这个…...

编程日记 2023/11/21 21:08:41

PG数据中DBeaver上传csv文件作为数据表

DBeaver 是一个开源的数据库工具&#xff0c;还是蛮好用的&#xff0c;有时候需要我们上传数据做表&#xff0c;数据为CSV格式的&#xff0c;DBeaver本身自带有功能实现的。 可打开连着的数据库&#xff0c;找到模式&#xff0c;点到下面的表里&#xff0c;选择一个表直接导入…...

编程日记 2023/11/21 21:07:41

第十七篇-Awesome ChatGPT Prompts-备份-百度翻译

Awesome ChatGPT Prompts——一个致力于提供挖掘ChatGPT能力的Prompt收集网站 https://prompts.chat/ 第十六篇-Awesome ChatGPT Prompts-备份【英文】 第十七篇-Awesome ChatGPT Prompts-备份-百度翻译 【中文】 高效提示词请参考,各种场景&#xff0c;2023-11-16内容如下(百…...

编程日记 2023/11/21 21:06:40

[Android] Amazon 的 android 音视频开发文档

https://developer.amazon.com/zh/docs/fire-tv/audio-video-synchronization.html#22-getplaybackheadposition-api-level-3https://developer.amazon.com/zh/docs/fire-tv/audio-video-synchronization.html#22-getplaybackheadposition-api-level-3...

编程日记 2023/11/21 21:05:39

UE4基础篇十六：自定义 EQS 生成器

UE4 中的 EQS 带有一组很好的查询项生成器，但在某些情况下，您可能更喜欢根据需要创建生成器。我决定编写自己的生成器，因为我必须编写一个查询来找到查询器周围的最佳位置，但又不能太靠近它。我知道我可以添加一个距离测试来随着距离增加分数，但我什至不想考虑距查询器一定…...

编程日记 2023/11/21 21:04:38

轿车5+1汽车变速器变速箱同步器操纵机构机械结构设计CAD汽车工程

wx供重浩&#xff1a;创享日记 对话框发送&#xff1a;汽车变速器 获取完整论文报告说明书工程源文件 变速器工程图 操纵机构3D图 一、机械式变速器的概述及其方案的确定 1.1 变速器的功用和要求 变速器的功用是根据汽车在不同的行驶条件下提出的要求&#xff0c;改变发动机…...

编程日记 2023/11/21 21:03:37

STM32F4移植SPI注意事项

一、注意事项 可以看我之前移植的文章&#xff0c;那些就不提了&#xff0c;记得要复用&#xff0c;把IO复用成对应的功能io&#xff0c;然后还要注意时钟&#xff0c;看你需要的功能&#xff0c;去调对应的时钟&#xff0c;把时钟调匹配了&#xff0c;基本上不会有问题。 比如…...

编程日记 2023/11/21 21:02:36

CV计算机视觉每日开源代码Paper with code速览-2023.11.16

点击CV计算机视觉&#xff0c;关注更多CV干货 论文已打包&#xff0c;点击进入—>下载界面 点击加入—>CV计算机视觉交流群 1.【基础网络架构】ConvNet vs Transformer, Supervised vs CLIP: Beyond ImageNet Accuracy 论文地址&#xff1a;https://arxiv.org//pdf/23…...

编程日记 2023/11/21 21:01:35

Git 简介及使用（1）

目录 一、在 Linux 环境中安装 Git 1. 先检查当前服务器中是否有 Git&#xff08;如果有显示如下图&#xff09; 2. 安装Git 3. 然后重复第一步&#xff1a;查看 Git 的版本信息即可 二、Git 的初始化及配置 1. 创建目录 2. 对仓库进行初始化 3. 新增两个配置项&#xff08…...

编程日记 2023/11/21 21:00:34

HTTPS流量抓包分析中出现无法加载key

HTTPS流量抓包分析(TLSv1.2)&#xff0c;这篇文章分析的比较透彻&#xff0c;就不班门弄斧了 https://zhuanlan.zhihu.com/p/635420027 写个小问题&#xff1a;RSA密钥对话框加载rsa key文件的时候注意不要在中文目录下&#xff0c;否则会提示&#xff1a;“Enter the passwor…...

编程日记 2023/11/21 20:58:31

学习Rust适合写什么练手项目？【云驻共创】

Rust是一门备受关注的系统级编程语言&#xff0c;因其出色的内存安全性、高性能和并发性能而备受赞誉。对于那些希望学习和掌握Rust编程语言的人来说&#xff0c;练手项目是一个不可或缺的环节。通过实际动手完成项目&#xff0c;你可以加深对Rust语言特性和最佳实践的理解&…...

编程日记 2023/11/21 20:57:30

Spring Cloud学习（九）【Elasticsearch 分布式搜索引擎01】

文章目录 初识 elasticsearch了解 ES倒排索引ES 的一些概念安装es、kibana安装elasticsearch部署kibana 分词器安装IK分词器ik分词器-拓展词库 索引库操作mapping 映射属性索引库的 CRUD 文档操作添加文档查看、删除文档修改文档Dynamic Mapping RestClient 操作索引库什么是Re…...

编程日记 2023/11/21 20:55:28

jvm 内存结构 ^_^

1. 程序计数器 2. 虚拟机栈 3. 本地方法栈 4. 堆 5. 方法区 程序计数器 定义&#xff1a; Program Counter Register 程序计数器&#xff08;寄存器&#xff09; 作用&#xff0c;是记住下一条jvm指令的执行地址 特点&#xff1a; 是线程私有的 不会存在内存溢出 虚拟机栈…...

编程日记 2023/11/21 20:54:27

SQL基础理论篇（八）：视图

文章目录 简介创建视图修改视图删除视图总结参考文献 简介 视图&#xff0c;即VIEW&#xff0c;是SQL中的一个重要概念&#xff0c;它其实是一种虚拟表(非实体数据表&#xff0c;本身不存储数据)。 视图类似于编程中的函数&#xff0c;也可以理解成是一个访问数据的接口。 从…...

编程日记 2023/11/21 20:53:26

element-ui中怎样使用iconfont的图标

1 登录 https://www.iconfont.cn/ 2 搜索合适的图 这里可以找到这个图所在的图库。这样就可以一次查找到对应的所有同款图标 3 选择同款加入购物车 4 将购物车的icon加入项目&#xff0c;注意是新建项目&#xff0c;除非你是确定需要前面已经加过的icon 5 下载icon 选择fon…...

编程日记 2023/11/21 20:52:26

记一次struct2漏洞获取服务器

文章目录 一、漏洞原因二、漏洞成果三、漏洞利用0x01 struts2漏洞获取shell0x02 todesk配置文件获取连接0x03 orcal数据库连接0x04 web网站 sso管理权限0x05 tomcat网站0x06 获取路由器权限0x07 远程桌面四、总结五、免责声明一、漏洞原因 由于网站使用struct2框架，未及时进行…...

编程日记 2023/11/21 20:51:25

ChatGPT API 学习

参考&#xff1a;从零开始的 ChatGPT API 使用指南&#xff0c;只需三步&#xff01; - 知乎 (zhihu.com) ChatGPT API 是一种由 OpenAI 提供的 API&#xff0c;它可以用最简单的方式把 ChatGPT 的聊天能力接入到各种应用程序或服务中。 自然语言语音识别(Natural Language S…...

编程日记 2023/11/21 20:50:24

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

编程新知 2026/2/19 20:31:40

shell脚本--常见案例

1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件&#xff1a; 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...

编程新知 2026/2/17 15:58:40

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中&#xff0c;每个页面需要使用ref&#xff0c;onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入&#xff0c;需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

编程新知 2025/9/14 18:41:15

多模态商品数据接口：融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 &#xff08;一&#xff09;多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如&#xff0c;当用户上传一张“蓝色连衣裙”的图片时&#xff0c;接口可自动提取图像中的颜色&#xff08;RGB值&…...

编程新知 2026/2/14 8:42:54

HTML前端开发：JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

编程新知 2025/11/10 10:45:11

浅谈不同二分算法的查找情况

二分算法原理比较简单&#xff0c;但是实际的算法模板却有很多&#xff0c;这一切都源于二分查找问题中的复杂情况和二分算法的边界处理&#xff0c;以下是博主对一些二分算法查找的情况分析。 需要说明的是&#xff0c;以下二分算法都是基于有序序列为升序有序的情况&#xf…...

编程新知 2026/2/20 0:16:58

3-11单元格区域边界定位(End属性)学习笔记

返回一个Range 对象&#xff0c;只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意&#xff1a;它移动的位置必须是相连的有内容的单元格…...

编程新知 2026/2/20 14:36:08

AI书签管理工具开发全记录（十九）：嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

编程新知 2026/1/30 16:24:23

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...

编程新知 2026/1/30 4:47:24

Linux C语言网络编程详细入门教程：如何一步步实现TCP服务端与客户端通信

文章目录 Linux C语言网络编程详细入门教程&#xff1a;如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket&#xff08;服务端和客户端都要&#xff09;2. 绑定本地地址和端口&#x…...

编程新知 2025/10/31 21:54:15