Tengo una aplicación Vite creada y necesito que tenga varias páginas. Leí los documentos y encontré cómo hacer esto ( se puede encontrar aquí ), sin embargo, cuando ejecuto el servidor, aparece una página en blanco.

Mi archivo vite.config.js :

 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()] })

Así es como se ve mi estructura de archivos:

Editar: he cambiado la configuración a lo que Tony publicó a continuación, pero todavía muestra una página en blanco.

Edición 2: descubrí que no necesita usar el enrutamiento vite.config.js, hay una manera más fácil Crear una copia de su archivo main.js, App.vue e index.html y cambiarles el nombre a algo diferente . Después de cambiarles el nombre, cambie el <script type="module" src="index.js"></script> a su nuevo archivo JS y cambie la importación del archivo .vue en su nuevo main.js a su nuevo archivo .vue . Aquí está mi nueva estructura:

Todo lo que hice fue copiar los archivos y cambiar los nombres y las importaciones, ¡y funcionó!