Vue 3 (Vite) 更改構建 index.html 文件名

Question

我正在創建一個包含 Vite 構建過程的 Vue 3 應用程序，並且我希望將最終構建的 index.html 文件名更改為 index.html.php。 我在他們的文檔中找不到任何參考。 甚至可能嗎？

Answer 1

一種解決方案是添加一個 Vite 插件來重命名 bundle 的index.html 。 例如，這個 Vite 插件接受一個字符串並將其分配給index.html的最終名稱：

/**
 * @param newFilename {string}
 * @returns {import('vite').Plugin}
 */
const renameIndexPlugin = (newFilename) => {
  if (!newFilename) return

  return {
    name: 'renameIndex',
    enforce: 'post',
    generateBundle(options, bundle) {
      const indexHtml = bundle['index.html']
      indexHtml.fileName = newFilename
    },
  }
}

然后在你的 Vite 配置中使用它：

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    renameIndexPlugin('index.html.php'),
  ],
})

演示