I have developed a Vite application and I am trying to implement multiple pages. I followed the documentation on how to achieve this (link here), but when I start the server, all I see is a blank page.
This is what my vite.config.js file looks like:
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()]
})
Below is an overview of my project's file structure:
Edit: I tried tweaking the configuration as suggested by tony in the comments, but the issue persists with a blank page.
Edit 2: After some experimentation, I discovered a simpler method to set up multiple pages without relying on vite.config.js routing. By duplicating main.js, App.vue, and index.html files and renaming them, then updating script source references and import paths accordingly, I was able to make it work smoothly. Here's a snapshot of my updated project structure for reference:
https://i.sstatic.net/3qbAF.png
All I did was duplicate and modify these files, and everything started functioning correctly!