When the vite multi-page application refreshes the page, it will not be in the current route and will return to the root route

When we use vite to develop multi-page applications

If there is a route in another page, then we will have a problem refreshing the page

vite does not have a serverFallback method similar to webpack

For example:

When we visit /nested/ it's right, it goes to the /nested item

When we visit /nested/getInfo/xx and other routes, refresh the page and find that the page will go back to the root project instead of the current project

We did not send the configuration static path rollback, my current solution is:

plugins: [{name: "rewrite-middleware",configureServer(serve) {serve.middlewares.use((req, res, next) => {if (req.url.startsWith("/nested/")) {if (req.url.includes("src")) {req.url = req.url} else {req.url = "/nested/"}}next()})},}]

Add a plugin to force the path to the /nested/ project

But the problem is, he has static resources, such as the includes('src') I wrote, what if he has multiple static resources?

I can't judge whether it is a route or a static resource. I have written an issue and will continue to follow up to solve this problem and find the best solution

The above is my personal solution

==========================================

The official staff gave me some suggestions, the best solution now is to encapsulate it into a function (the best way I can think of)

I encapsulated my plugin into a function that can receive parameters, so at least it feels pretty good to use

const rewritePlugin = (path, excludes) => ({name: "rewrite-middleware",configureServer(serve) {serve.middlewares.use((req, res, next) => {if (req.url.startsWith(path)) {const isRaw = excludes.some((dir) => req.url.includes(dir))if (!isRaw) req.url = path}next()})},})// The second parameter, see which folders are in your project, just write them allplugins: [rewritePlugin('/nested/', ['/nested/src', '/nested/static'])]