I have a Vite app created and I need it to have multiple pages. I read the docs and found how to do this (can be found here), however when I run the server I get a blank page.

My vite.config.js file:

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

const { resolve } = require('path')

module.exports = {
  build: {
    rollupOptions: {
      input: {
        home: resolve(__dirname, 'src/Home/index.html')
      }
    }
  }
}

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()]
})

Here's what my file structure looks like:

Edit: I have changed the config to what tony posted below, but it is still showing a blank page.

Edit 2: I found out that you don't need to use the vite.config.js routing, there's an easier way Create a copy of your main.js, App.vue, and index.html file and rename them to something different. After you rename them change the <script type="module" src="index.js"></script> to your new JS file, and change the .vue file import in your new main.js to your new .vue file. Here's my new structure:

All I did was copy the files and change the names and imports, and it worked!