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

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

news 2026/5/14 1:18:50

需求描述

在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项目的开发过程中，我们为了能区分正式环境和测试环境， 通常会进行环境配置文件的区分， 例如，开发环境一个配置文件、生产环境一个配置文件。因此，我们就希望在项目的index.html 的 title 标签中&…...

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

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

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

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

* stack smashing detected *: terminated

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

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

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

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

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

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

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

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

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

Awesome ChatGPT Prompts——一个致力于提供挖掘ChatGPT能力的Prompt收集网站 https://prompts.chat/ 第十六篇-Awesome ChatGPT Prompts-备份【英文】第十七篇-Awesome ChatGPT Prompts-备份-百度翻译【中文】高效提示词请参考,各种场景，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供重浩：创享日记对话框发送：汽车变速器获取完整论文报告说明书工程源文件变速器工程图操纵机构3D图一、机械式变速器的概述及其方案的确定 1.1 变速器的功用和要求变速器的功用是根据汽车在不同的行驶条件下提出的要求，改变发动机…...

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

STM32F4移植SPI注意事项

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

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

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

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

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

Git 简介及使用（1）

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

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

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

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

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

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

Rust是一门备受关注的系统级编程语言，因其出色的内存安全性、高性能和并发性能而备受赞誉。对于那些希望学习和掌握Rust编程语言的人来说，练手项目是一个不可或缺的环节。通过实际动手完成项目，你可以加深对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. 方法区程序计数器定义： Program Counter Register 程序计数器（寄存器） 作用，是记住下一条jvm指令的执行地址特点： 是线程私有的不会存在内存溢出虚拟机栈…...

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

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

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

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

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

1 登录 https://www.iconfont.cn/ 2 搜索合适的图这里可以找到这个图所在的图库。这样就可以一次查找到对应的所有同款图标 3 选择同款加入购物车 4 将购物车的icon加入项目，注意是新建项目，除非你是确定需要前面已经加过的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 学习

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

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

鸿蒙动画开发全指南：属性动画+显式动画+转场动画+路径动画，一文掌握所有动画类型

📖 鸿蒙NEXT开发实战系列 | 第32篇 | 实战篇 🎯 适合人群：有ArkUI基础的开发者 ⏰ 阅读时间：约15分钟 | 💻 开发环境：DevEco Studio 5.0 导航链接上一篇：鸿蒙NEXT开发实战系列31-通知与提醒管理…...

编程新知 2026/5/14 1:08:55

长期使用taotoken聚合api在项目中的稳定性主观体验分享

🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度长期使用Taotoken聚合API在项目中的稳定性主观体验分享 1. 项目背景与接入简述我们团队负责一个面向内部的知识管理与智能问答系…...

编程新知 2026/5/13 23:23:01

3PEAK思瑞浦 TPA1731-S5TR SOT23-5 运算放大器

特性供电电压:4.5伏至36伏偏移电压:最大士75伏差分输入电压范围至电源轨，可作为比较器工作轨到轨输入和输出带宽:3MHz 斜率:4V/us 低噪声:21nV/vHz(1kHz时) 高电容负载驱动能力:10nF 工作温度范围:-40C至125C...

编程新知 2026/5/13 23:20:50

基于Claude API的AI应用开发：claude-toolshed框架实战指南

1. 项目概述与核心价值最近在折腾AI应用开发，特别是围绕Claude API构建一些自动化工具时，发现了一个挺有意思的开源项目——aksh-3141/claude-toolshed。这名字直译过来是“Claude的工具棚”，听起来就挺接地气的。简单来说，它不是…...

编程新知 2026/5/13 21:53:18

别再傻等下载了！手把手教你用wget离线搞定sentence_transformers模型（以all-MiniLM-L6-v2为例）

高效离线部署sentence_transformers模型：wget实战指南 1. 为什么需要离线下载方案在自然语言处理领域，预训练模型已成为各类文本理解任务的基础设施。然而，当我们需要在生产环境或受限网络条件下部署这些模型时，直接通过Python库…...

编程新知 2026/5/13 21:02:10

3步彻底解决Zotero文献库重复问题：Zotero Duplicates Merger插件终极指南

3步彻底解决Zotero文献库重复问题：Zotero Duplicates Merger插件终极指南【免费下载链接】ZoteroDuplicatesMerger A zotero plugin to automatically merge duplicate items 项目地址: https://gitcode.com/gh_mirrors/zo/ZoteroDuplicatesMerger 还在为Zo…...

编程新知 2026/5/13 19:59:06

终极指南：Shoelace如何利用Shadow DOM实现完美样式隔离

终极指南：Shoelace如何利用Shadow DOM实现完美样式隔离【免费下载链接】shoelace Shoelace is now Web Awesome. Come see what’s new! 项目地址: https://gitcode.com/gh_mirrors/sh/shoelace Shoelace（现已更名为Web Awesome）作为…...

编程新知 2026/5/13 19:50:26

反PUA30天 Day15：“你格局小“——当这句话出现时，通常意味着对方已经没有别的论据了 |乐想屋

“本文来自「乐想屋」公众号，系列更新[职场反PUA30天觉醒计][职场生存暗规则]，每天一篇清醒认知，拒绝内耗，少踩坑，快速成长。”绩效沟通那天，leader跟我说了一句话：「你不要老盯着自己那一亩三分…...

编程新知 2026/5/13 18:54:23

如何免费使用GanttProject：开源项目管理软件的完整入门指南

如何免费使用GanttProject：开源项目管理软件的完整入门指南【免费下载链接】ganttproject Official GanttProject repository. 项目地址: https://gitcode.com/gh_mirrors/ga/ganttproject 你是否正在寻找一款功能强大且完全免费的项目管理工具？…...

编程新知 2026/5/13 18:36:01

为OpenClaw智能体工作流配置Taotoken作为核心模型提供商

🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度为OpenClaw智能体工作流配置Taotoken作为核心模型提供商 OpenClaw是一个流行的智能体开发框架，它允许开发者构建和编排…...

编程新知 2026/5/13 18:08:31