【Vite】修改构建后的 index.html 文件名

在 Vite 项目中，默认构建 index.html 。但有时候我们需要修改 index.html 为其他文件名，比如 index-{时间戳}.html 。

我们可以这样配置 vite.config.js：

import { defineConfig } from 'vite';
import type { PluginOption } from 'vite';

// 自定义插件
type RenameHtmlPlugin = () => PluginOption;
const renameHtmlPlugin: RenameHtmlPlugin = () => {
    return {
        name: 'rename-index-html',
        enforce: 'post',
        generateBundle(_, bundle) {
            const currentTime = (Date.now() / 1000).toFixed(0);
            const newFileName = `index-${currentTime}.html`;
            bundle['index.html'].fileName = newFileName;
        },
    };
};

export default defineConfig({
    // ... 其他配置
    plugins: [
        // ... 其他插件
        renameHtmlPlugin(),
    ],
});

现在，执行 pnpm build 构建出来的就是 index-{时间戳}.html 啦。