Vite preview not displaying the correct page

Have you guys experienced this issue before when using Vite? How did you resolved it?

I’m experiencing a different result using vite dev and vite preview for multi page site.

The vite dev works as expected when testing the development environment. But when running the preview, except for the /index page. the rest of the page have the correct url routing but the page displayed is still from the main.js (/index.html root).

I am using expressJS for my server side routing and vanilla JS.

I am following the vite documentation with folder/index.html for multi page site.

vite.config.js set up
resolve: {
alias: {
'@': resolve(dirname, 'src'),
},
},
build: {
base: '/src',
rollupOptions: {
input: {
main: resolve(dirname, 'index.html'),
about: resolve(dirname, 'src/about/index.html'),
fruits: resolve(dirname, 'src/fruits/index.html'),
404: resolve(__dirname, 'src/404.html')
},
output: {
entryFileNames: '[name].js',
chunkFileNames: '[name]-[hash].js',
assetFileNames: '[name]-[hash].[ext]',
},
},
},
server: {
middlewareMode: true,
fs: {
allow: ['..'],
},
},
};