在vite中，有没有办法从index.html更新根html名称

Question

我正在尝试将现有项目更新为 vite，但我在文档中读到 Vite 需要一个 index.html 文件来工作。是否有指定 vite 应该构建的另一个文件名？就我而言 main.html

Answer 1

入口点配置在build.rollupOptions.input：

\n

import { defineConfig } from \'vite\'\nexport default defineConfig({\n  \xe2\x8b\xae\n  build: {\n    rollupOptions: {\n      input: {\n        app: \'./index.html\', // default\n      },\n    },\n  },\n})\n

\n

您可以将其更改为main.html，如下所示。提供应用程序时，您必须手动导航到/main.html，但您可以配置server.open为自动打开该文件：

\n

import { defineConfig } from \'vite\'\n\nexport default defineConfig({\n  \xe2\x8b\xae\n  build: {\n    rollupOptions: {\n      input: {\n        app: \'./main.html\',\n      },\n    },\n  },\n  server: {\n    open: \'/main.html\',\n  },\n})\n

\n

演示

\n

Answer 2

如果您不仅尝试更改根 HTML 页面的名称，还尝试更改其路径build，则更改或server选项将无济于事。例如，如果您想加载<project root>/src/main.html而不是<project root>/index.html，则可以在 处访问它http://localhost:3000/src/main.html，但不能简单地在 处访问localhost:3000。

要从不同的路径提供文件，您需要root在配置文件中进行设置。请注意，您还需要定义相对于这个新根的其他路径，例如dist. 否则，打包的文件将输出到/src/dist.

加载 HTML 文件的更完整的配置文件/src如下所示：

import path from "node:path";
import process from "node:process";
import { defineConfig } from "vite";

export default defineConfig({
  server: {
    open: "main.html",
  },
  root: "src",
  publicDir: "../public",
  build: {
    outDir: "../dist"
  },
  resolve: {
    alias: { "/src": path.resolve(process.cwd(), "src") }
  },
});

Answer 3

对于任何试图提供index.html位于源文件深处的文件的人，但希望开发服务器实际上在 上提供该文件/，您可以在您的 中使用像这样的 vite 插件来做到这一点vite.config：

export default defineConfig({
  plugins: [
    vue(),
    {
      name: "deep-index",
      configureServer(server) {
        server.middlewares.use(
          (req, res, next) => {
            if (req.url === '/') {
              req.url = '/some/path/to/your/index.html';
            }
            next();
          }
        )
      }
    }
  ]
})

Answer 4

使用Vite的transformIndexHtml()交换HTML内容

以下是实现相同高级目标的方法：

在构建时，我们将index.html 的内容与另一个html 文件交换。

对于我的用例，项目暂时需要静态构建输出的两种变体：1. Vue 应用程序，2. 纯 JS 应用程序。交换index.html内容是实现这一目标的最直接方法，无需担心路径、路由等。

为此，会发生文件转换（使用fs），并且在项目的一次性构建步骤期间就可以了。如果在另一种情况下存在常规文件操作（不是一次性），则性能可能会成为问题。

Vite 文档：transformIndexHTML()

1.有多个html源文件

至少index.html需要一项；制作你自己的变体。

index.html
index_type1.html
index_type2.html
whatever.html
etc

2. 在你的 vite.config 中创建一个 HTML 替换插件

这里我们直接在 vite 配置中内嵌一个插件。这将使用您选择的任何源文件覆盖index.html。它发生在其他构建步骤之前，基本上相当于您在运行之前手动重命名文件build。

vite.config.js

import fs from 'fs/promises'

export default defineConfig({

    plugins: [
      // ...

      {
        name: 'my-plugin-for-index-html-build-replacement',
        transformIndexHtml: {
          enforce: 'pre', // Tells Vite to run this before other processes
          async transform() {

            // Do some logic; whatever you want
            if (env.MY_ENV_VARIABLE == 'myType2') {

              // Grab new HTML content to place into index.html
              return await fs.readFile('./index_type2.html', 'utf8')
            }
          }
        }
      }

      // ...
    ]

})