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

Question

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

Answer 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

Answer 2

使用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 导出。

Answer 3

如果您不仅要更改根 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'
},

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

In vite, is there a way to update the root html name from index.html

vite