Vue 3（Vite）更改构建index.html文件名

Question

我正在创建一个包含 Vite 构建过程的 Vue 3 应用程序，并且我希望将最终构建的 index.html 文件名更改为 index.html.php。我在他们的文档中找不到任何参考。有可能吗？

Answer 1

一种解决方案是添加一个 Vite 插件来重命名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'),
  ],
})

演示