How to use different index.html file for development and production with ViteJS and VueJS

When building web applications with VueJS and ViteJS you may want to use different index.html files for development and production (to add some server-side rendered variables for example).

You can do that in your vite.config.ts (or vite.config.js) file by using a custom plugin that returns your desired index*.html file depending on some variable.

Here we use index_dev.html for development and index.html for production builds.

import fs from 'fs/promises';
import { defineConfig } from 'vite';

export default defineConfig({
  // ...
  plugins: [
    // ...
    {
      name: 'index-html-env',
      async transformIndexHtml() {
        if (process.env.NODE_ENV !== 'production') {
          return await fs.readFile('index_dev.html', 'utf8')
        }
      }
    },
  ],
  // ...
});