CODEWITHSUNDEEP
vue.jsvite
Keith Petrillo
Keith Petrillo

Reputation: 175

Vue 3 (Vite) change build index.html filename

I'm creating a Vue 3 application that includes Vite's building process, and I'm looking to change the final built index.html filename to index.html.php. I can't find any reference in their documentation. Is it even possible?

Upvotes: 5

Views: 6357

Answers (1)

tony19
tony19

Reputation: 138306

One solution is to add a Vite plugin that renames the index.html of the bundle. For example, this Vite plugin takes a string and assigns that to index.html's final name:

/**
 * @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
    },
  }
}

Then use it in your Vite config:

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

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

demo

Upvotes: 16

Related Questions