Vite打包，给打包之后的Html文件添加打包时间

最新推荐文章于 2024-07-24 16:36:06 发布

程先生哈

最新推荐文章于 2024-07-24 16:36:06 发布

阅读量562

点赞数 1

文章标签： html vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_35073135/article/details/139439070

版权

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>