Vite multi-page app trailing slash dev server workaround for https://github.com/vitejs/vite/issues/6596

forward-to-trailing-slash-plugin.js

/**
 * Forwards routes in the given list to a route with a trailing slash in the dev server
 * Useful for multi page vite apps where all rollup inputs are known.
 * 
 * Vite fix is upcoming, which will make this plugin unnecessary
 * https://github.com/vitejs/vite/issues/6596
 */
export default routes => ({
    name: 'forward-to-trailing-slash',
    configureServer(server) {
        server.middlewares.use((req, _res, next) => {
            const requestURLwithoutLeadingSlash = req.url.substring(1)

            if (routes.includes(requestURLwithoutLeadingSlash)) {
                req.url = `${req.url}/`
            }
            next()
        })
    }
})

vite.config.js

/**
 * Example vite.config.js using forwardToTrailingSlash plugin
 */
import { defineConfig } from 'vite'
import forwardToTrailingSlashPlugin from './forward-to-trailing-slash-plugin.js'

const build = {
  rollupOptions: {
    input: {
      main: new URL('./index.html', import.meta.url).href,
      photography: new URL('./photography/index.html', import.meta.url).href
    }
  }
}

export default defineConfig({
  build,
  plugins: [
    forwardToTrailingSlashPlugin(Object.keys(build.rollupOptions.input))
  ]
})