Vite app with multiple entry points, Vue router returns a 404 on refresh

[lordfeck]

I'm building a web app in Vue3 and using Vite to serve it during development. The app is split into three parts - management, user and login. Each of these will call the same backend.

The intention is to split my app into three and reuse libraries and components across each section, while bundling only the necessary code in the final build. Also, I want a lightweight login page that detects which type of user has logged in, then redirects him to the relevant section. Hence why I have configured Vite to run in MPA mode.

I've vite configured as follows (relevant sections only):

      rollupOptions: {
        input: {
          mgmt: resolve(__dirname, './mgmt/index.html'),
          user: resolve(__dirname, './user/index.html'),
          login: resolve(__dirname, './index.html')
        },
      appType : 'mpa'

And my JsAppRoot is laid out like this:

vite.config.js
mgmt/index.html
user/index.html
index.html   # login
src/mgmt.ts
src/mgmt/*   # mgmt-specific components
src/user.ts
src/user/*   # user-specific components
src/common/* # common components
src/login.js

I also use vue router in Html5 history mode. It's configured in mgmt.ts like this:

const router = createRouter({
        history: createWebHistory('/mgmt'),
        routes: [
            // RECEPTION
            {
                path: '/room/details',
                name: 'room-details',
                component: RoomDetails,
                meta: {
                    breadcrumb: [{label: 'Room Details'}],
                    title: 'Room Details'
                }
            }
        ]
});

Now when I run the app, I can see the login page and complete login successfully, then redirect to the relevant part of the app depending on the user role - management or user. Also when I navigate through the app I see the router updating the path correctly - i.e. https://localhost:5173/mgmt/room/details

Yet when I reload the page, I get a 404 and a blank screen. It seems that the router doesn't recognise or like my MPA configuration.

How do I fix this? I've rewritten part of my app to be a SPA, and when in that mode reloading does make the router load the correct path, it means I lose the advantages of modularity.

Crosspost of my SO question.