Quick Fix: When setting up a multi-page app using Vite, ensure the URL you type in the browser to render a specific page includes a trailing slash (/). This is required for the correct rendering of the page.
The Problem:
A developer is trying to set up a multi-page application using Vite, a popular build tool for developing front-end applications. They have added a new page, ‘login’, to their project and configured Vite to recognize multiple entry points. When they access the ‘login’ page, they expect it to load ‘login/index.html’, but it keeps redirecting to the default ‘index.html’ page instead. The developer needs to rectify this issue and ensure that accessing the ‘login’ page loads the intended ‘login/index.html’ page.
The Solutions:
Solution 1: Pay Attention to URL Path
– For multi-page apps in Vite, you should type `http://localhost:5173/login/` in the browser, rather than `http://localhost:5173/login` to correctly render `./login/index.html`.
– Follow the official Vite documentation guidelines for multi-page apps.
Q&A
What is the problem with my vite multi page app setup?
—
Missing trailing / in the URL when accessing the login page.
How to fix the issue with vite multi page app setup?
—
Add a trailing / to the URL when accessing the login page.
What is the correct URL to access the login page?
—
http://localhost:5173/login/ (with a trailing /).
Video Explanation:
The following video, titled "Builds with Vite #17 - Multi-page app - YouTube", provides additional insights and in-depth exploration related to the topics discussed in this post.
Should this work OK with URL parameters? Once I upload to my host, I get some weird behaviour if say for example I use ...
