Changing the HTML file name in Vite Vue3 doesn't work

Question

I'm making a project in Vue3 with Vite. I have attached the project structure and file contents below. I want to use the HTML file name test1.html, but it seems that this code is just not handled. When I comment it, nothing changes, it still uses index.html. If I delete index.html, the page won't load at all.

build: {
    outDir,
    emptyOutDir: true,
    rollupOptions: {
      input: {
        test1: resolve(root, 'test1.html'),
    },
  },
},

I will be grateful to you for help!

Project structure:

test1/
├─ dist/
├─ node_modules/
├─ src/
│  ├─ assets/
│  ├─ components/
│  ├─ index.html
│  ├─ test1.html
│  ├─ test1.js
│  ├─ Test1.vue
├─ package.json
├─ vite.config.js

vite.config.js

import { defineConfig } from 'vite'
import { resolve } from 'path'
import vue from '@vitejs/plugin-vue'

const root = resolve(__dirname, 'src')
const outDir = resolve(__dirname, 'dist')

// https://vitejs.dev/config/
export default defineConfig({
  root,
  plugins: [vue()],
  resolve: {
    alias: {
      '@': root,
    }
  },
  build: {
    outDir,
    emptyOutDir: true,
    rollupOptions: {
      input: {
        test1: resolve(root, 'test1.html'),
      },
    },
  }
})

index.html and test1.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <p>123</p>
    <script type="module" src="./test1.js"></script>
  </body>
</html>

test1.js

import { createApp } from 'vue'
import Test1 from '@/Test1.vue'

createApp(Test1).mount('#app')

Test1.vue

<template>
  <h1>All works!</h1>
</template>

that vite option is a **build** option, i.e. for building/deploying. If you're serving the app, you'll need an additional change. See [the answers on this question](https://stackoverflow.com/questions/71295772) — yoduh, May 02 '23 at 22:37

Changing the HTML file name in Vite Vue3 doesn't work

0 Answers0