Vite + Vue router base path issue

[lobo-tuerto]

Version

4.1.5

Reproduction link

github.com - vite+router repro

Steps to reproduce

When setting a different base path in vite.config.ts and router.ts like:

vite.config.ts:

export default defineConfig(({mode}) => {
  return {
    base: '/basedir/',
    //...
  }
})

router.ts:

export const router = createRouter({
  history: createWebHistory('/baseroute/')
})

When starting the application it says:

VITE v3.1.0  ready in 233 ms

  ➜  Local:   http://localhost:5173/basedir/
  ➜  Network: use --host to expose

Open your browser and navigate to: http://localhost:5173, and you can see for a sub-second that it goes to http://localhost:5173/basedir and then immediately it changes to: http://localhost:5173/baseroute/basedir and you'll usually see an error.

If you refresh you'll see:

The server is configured with a public base URL of /basedir/ - did you mean to visit /basedir/baseroute/basedir/ instead?

What is expected?

The app should be serving from the base_dir,
then the router should take over and put the main route in front
of the base_dir.

I would expect it to open: http://localhost:5173/basedir/baseroute/.

What is actually happening?

When opening http://localhost:5173/basedir/ it gets redirected to
http://localhost:5173/baseroute/basedir/ instead, and getting an error.

---

After building for production, the base directory should go in first
(for the initial load) then router take over the rest of the URL, I think.

Right now for this to work, they both have to contain the same value.

But I'd like to deploy to a subdirectory and then have the router respond to routes using that subdirectory as base.

If you open http://localhost:5173/baseroute:

The server is configured with a public base URL of /basedir/ - did you mean to visit /basedir/baseroute instead?

If you open http://localhost:5173/basedir

The server is configured with a public base URL of /basedir/ - did you mean to visit /basedir/basedir instead?

If you open http://localhost:5173/baseroute/:

The server is configured with a public base URL of /basedir/ - did you mean to visit /basedir/baseroute/ instead?

If you open http://localhost:5173/basedir/ then you get redirected to: http://localhost:5173/baseroute/basedir/, and
there is an error in the browser console that reads:

[Vue Router warn]: No match found for location with path "/basedir/"

I think it should redirect you to: http://localhost:5173/basedir/baseroute/

[posva]

Both values have to be the same. That’s why the initial template with vite uses an env variable

[lobo-tuerto]

Shouldn't it throw an error or show a warning if both values are not the same then? 🤔

[posva]

No, because they happen in different places (build vs runtime)

[lobo-tuerto]

After building, you should have access in the runtime to the expected value (the one from build-time) and can then issue a warning, right?