vite版本为5.2.0，vite-plugin-html版本为3.2.2
我们工作的一个小需求，就是由于更新的频率的问题，如果只有一个三位数的版本号的话，可能会导致，测试拿到的不是最新的打包版本。从而引发测试版本问题，于是就想到了， 给每次打包的时间记录下来，写在打包之后的index.html文件中。这样就能清楚的知道，测试的是哪个版本。
安装vite-plugin-html插件
(c)npm install vite-plugin-html -D配置config文件
安装完成之后，需要在根目录的vite.config.js文件或者vite.config.ts文件中，配置一下对应的内容；
// 原来的内容
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
// 首先是引入插件
import { createHtmlPlugin } from 'vite-plugin-html';
export default defineConfig({
plugins: [
vue(),
// 给html模版添加打包的时间
createHtmlPlugin({
minify: false, // 是否压缩index.html文件，这里选择不压缩
pages: [
{
template: 'index.html',
filename: 'index.html',
injectOptions: {
data: {
buildTime: new Date().toLocaleString() // 这里就是记录的当前打包的时间。前面的键位名称‘buildTime’需要个index.html文件中的相对应
}
}
}
]
})
],
});更改index.html文件
然后在更改根目录的index.html文件，给想要添加的打包日期的地方添加一个"<%- buildTime%>"，示例如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue</title>
<!--这里的名称需要和刚刚在vite.config.js中配置的统一-->
<meta name="build-time" content="<%- buildTime%>">
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
这样配置工作就完成了。等到我们打包完成之后，就会把当时打包的日期，写入这个meta标签中。
打包之后的index.html文件
查看打包之后的文件，已经成功的添加了打包的日期。此后每次打包之后，就会把当前的打包时间添加到打包之后的index.html文件中。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue</title>
<meta name="build-time" content="2024/6/4 11:54:20">
<script type="module" crossorigin src="/assets/index-B24IYum8.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-ILNreh1T.css">
</head>
<body>
<div id="app"></div>
</body>
</html>
