Multipage apps created with Vite have inconsistent URL behavior between the dev server and the build.
Using the following folder structure:
├── package.json
├── vite.config.js
├── index.html
└── nested
└── index.html
Both dev and build use the same URL to access the nested page; either:
<root>/nested
<root>/nested/
- both of the above
- Dev:
nested
page cannot be accessed without the trailing slash (<root>/nested/
) - Build:
nested
page can be accessed with or without trailing slash
- Clone this repository.
- Run
npm install
at the repository root. - Run
npm run dev
and attempt to navigate tolocalhost:3000/nested
. You should see "Main Page". Navigating tolocalhost:3000/nested/
produces the desired "Nested Page". - Run
npm run build
andnpm run preview
, then navigate tolocalhost:5000/nested
. You should see "Nested Page". The same occurs when adding the trailing slash.