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

需求描述

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