Vue 3 (Vite) change build index.html filename

Question

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?

I guess you can modify the index file inside your vite.config.js -> build: { rollupOptions: { ... but it's just a guess. — wittgenstein
– wittgenstein, Commented May 5, 2022 at 14:44
I looked through the rollupOptions documentation but I couldn't find an option to change the compiled filename. — Keith Petrillo
– Keith Petrillo, Commented May 5, 2022 at 15:24

tony19 · Accepted Answer · 2022-05-26 20:24:56Z

16

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

answered May 26, 2022 at 20:24

tony19

140k23 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jaromanda X Over a year ago

Nice! You saved my receding hairline 👴

waldemar_enns Over a year ago

When running npm run build and afterwards npm run serve (running the built application in preview mode) that leads into a 404 resolve, since the preview mode can't resolve the indx.html.php file. To make it work in production, you need to also point to that index.html.php file. Have not tried it yet, but will post it here when I am done.

thdoan Over a year ago

This is really cool, but it doesn't work with other plugins such as CRXJS. The file may have been renamed, but manifest.json still retains the old path. Anyone know how to resolve this?

Collectives™ on Stack Overflow

Vue 3 (Vite) change build index.html filename

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related