在 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',
  },
})

演示

Answer 2

使用 Vite 開發應用程序時， index.html是入口點。 您可以通過將build.rollupOptions.input ./main.html調整它。

在庫模式中，入口點是由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'
},