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>
