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

【问题标题】：In vite, is there a way to update the root html name from index.html在 vite 中，有没有办法从 index.html 更新根 html 名称
【发布时间】：2023-02-06 04:35:06
【问题描述】：

我正在尝试将现有项目更新为 vite，但我在文档中读到 Vite 需要一个 index.html 文件。有没有指定另一个文件名来构建 vite？在我的例子中 main.html

【问题讨论】：

标签： vite

【解决方案1】：

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

import { defineConfig } from 'vite'
export default defineConfig({
  ⋮
  build: {
    rollupOptions: {
      input: {
        app: './index.html', // default
      },
    },
  },
})

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

import { defineConfig } from 'vite'

export default defineConfig({
  ⋮
  build: {
    rollupOptions: {
      input: {
        app: './main.html',
      },
    },
  },
  server: {
    open: '/main.html',
  },
})

demo

【讨论】：

【解决方案2】：

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

要从不同的路径提供文件，您需要在配置文件中设置root。

import { defineConfig } from 'vite'

export default defineConfig({
  ⋮
  root: 'src',
  server: {
    open: 'main.html',
  },
})

请注意，您还需要定义与此新根相关的其他路径，例如 dist。否则，包将输出到/src/dist。

build: {
  outDir: '../dist'
},

【讨论】：

【解决方案3】：

使用 Vite 开发应用程序时，index.html 是入口点。您可以通过将build.rollupOptions.input 设置为./main.html 来调整它。

在Library Mode中，入口点是由build.lib.entry而不是index.html指定的入口点。在这种情况下，index.html演示页面只与开发服务器相关，它会自动转换任何以.html结尾的文件，因此您只需打开http://localhost:3000/main.html，无需调整配置。在库模式下设置build.rollupOptions.input 将覆盖build.lib.entry 指定的入口点并将演示页面代码捆绑为库的一部分，同时中断全局 UMD 导出。

【讨论】：

【解决方案4】：

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

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';
            }
          }
        )
      }
    }
  ]
})

【讨论】：