如何在Vite插件中动态生成index.html，无需依赖现有文件？

以下是几种无需根目录存在真实index.html的可行方案：

方案一：开发环境拦截请求 + 生产构建后生成 #

分场景处理，开发时直接返回动态HTML，构建后写入目标文件：

• 开发环境：通过configureServer钩子添加中间件，拦截对根路径（/或/index.html）的请求，直接返回基于harness.tsx生成的HTML内容。如果需要Vite热更新功能，记得在HTML中加入Vite客户端脚本。
• 生产环境：在buildEnd钩子中，生成完整HTML内容并写入构建输出目录的index.html。

示例代码：

import fs from 'fs/promises';
// 假设你有一个将harness.tsx渲染为HTML字符串的工具函数
import { renderHarnessToHtml } from './your-render-utils';

export default function dynamicHtmlPlugin() {
  return {
    name: 'dynamic-html-plugin',
    configureServer(server) {
      server.middlewares.use(async (req, res, next) => {
        if (req.url === '/' || req.url === '/index.html') {
          let html = await renderHarnessToHtml();
          // 插入Vite客户端脚本，保证开发热更新正常工作
          html = html.replace('</body>', '<script type="module" src="/@vite/client"></script></body>');
          res.setHeader('Content-Type', 'text/html');
          res.end(html);
          return;
        }
        next();
      });
    },
    async buildEnd() {
      const html = await renderHarnessToHtml();
      await fs.writeFile('./dist/index.html', html, 'utf-8');
    }
  };
}

方案二：构建时生成HTML并注入输出Bundle #

利用generateBundle钩子，在Rollup打包完成后，收集生成的JS/CSS资源，动态拼接成包含资源引用的HTML，并将其添加到输出bundle中，替代Vite默认的HTML生成逻辑。

示例代码：

import { renderHarnessToHtml } from './your-render-utils';

export default function dynamicHtmlPlugin() {
  return {
    name: 'dynamic-html-plugin',
    async generateBundle(_options, bundle) {
      // 筛选入口JS文件和CSS资源
      const entryJs = Object.values(bundle).find(asset => asset.type === 'chunk' && asset.isEntry);
      const cssAssets = Object.values(bundle).filter(asset => asset.type === 'asset' && asset.fileName.endsWith('.css'));

      // 拼接基础HTML结构
      let html = `<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dynamic App</title>`;

      // 引入CSS资源
      cssAssets.forEach(css => {
        html += `\n  <link rel="stylesheet" href="/${css.fileName}">`;
      });

      html += `\n</head>
<body>`;

      // 插入harness渲染的内容或挂载节点
      html += `\n  ${await renderHarnessToHtml()}`;

      // 引入入口JS文件
      if (entryJs) {
        html += `\n  <script type="module" src="/${entryJs.fileName}"></script>`;
      }

      html += `\n</body>
</html>`;

      // 将生成的HTML添加到输出bundle
      bundle['index.html'] = {
        type: 'asset',
        fileName: 'index.html',
        source: html
      };
    }
  };
}

方案三：使用虚拟模块作为入口 #

通过虚拟模块机制创建虚拟index.html，让Vite将其视为入口文件，再在load钩子中返回动态生成的HTML内容，需配合Vite入口配置：

1. 插件中定义虚拟模块：

import { renderHarnessToHtml } from './your-render-utils';

export default function dynamicHtmlPlugin() {
  return {
    name: 'dynamic-html-plugin',
    resolveId(id) {
      if (id === 'virtual:dynamic-index') {
        return '\0virtual:dynamic-index'; // 虚拟模块前缀避免命名冲突
      }
    },
    async load(id) {
      if (id === '\0virtual:dynamic-index') {
        return await renderHarnessToHtml();
      }
    }
  };
}

2. 在vite.config.js中配置入口：

export default {
  plugins: [dynamicHtmlPlugin()],
  build: {
    rollupOptions: {
      input: 'virtual:dynamic-index'
    }
  }
};

这种方式需确保虚拟模块的HTML能被Vite正确处理，开发环境可能需要额外配置中间件支持。

内容的提问来源于stack exchange，提问作者eagspoo