Svelte multipage website with Vite DevTool

Question

I'm trying to build a multi-page site with Svelte using Vite. According to the picture below (Vite documentation), I can just add a folder with index.html in it.

I tried it but it doesn't work. When I visit localhost:5173/about it keeps opening the Homepage. Here's my folder structure

Anyone how to fix this?

Answer 1

are you using Svelte (not SvelteKit)? I was facing the same problem with Svelte, and then I tried to install 3rd party library for routing but it didn't work as I expected. I solve the problem by switching to SvelteKit.

Answer 2

It's a defect on vite's part. See #6596. If you really need to config the behavior differently, this issue comment provides a solution. If it doesn't bother you much, just add a trailing slash to that path and live with it until vite team resolve the issue.

localhost:5173/about  # this doesn't work
localhost:5173/about/ # this works

Answer 3

If you are on the latest version of sveltekit, about.js in your screenshot is not a valid route. Instead, change it to routes/about/+page.svelte & routes/about/+page.js. This was part of recent changes the svelte team implemented ahead of the upcoming 1.0 release. More here.