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')
  // ...
1 email / week to learn how to (ab)use technology for fun & profit: Programming, Hacking & Entrepreneurship.
I hate spam even more than you do. I'll never share your email, and you can unsubscribe at any time.

Tags: programming, webdev, vuejs

Want to learn Rust, Cryptography and Security? Get my book Black Hat Rust!