I've developed a Vue.js app that uses vue-router to route between components. When routing to a different component, the url changes.

  const routes = [{
    path: "",
    mode: 'history',
    name: "bla",
    component: Bla,
    ...
  },
  {
    path: "/secondpath"
    ...
  }]
  

There is a button on the UI that uses <router-link...> to route to another component which changes path from / to /secondpath. However, when I directly go to .../secondpath on my browser, it returns 404.

If I run the app in dev environment by npm run dev then the above scenario works. If I first build it by vite build and then serve the static files using a web server, e.g. express.js then I get the issue above.

Serving via express.js:

const port = process.env.UI_PORT || 3000
const express = require('express')
const cors = require('cors')
const app = express()

app.use(cors())
app.use(express.static('dist'))
app.listen(port, () => console.log(`Listening on port ${port}`))

I do have only one html file which is the index.html. What do I do wrong here? Should I create multiple html files and somehow redirect user to another html page, instead of using <router-link...>. And how can I do that if that is the issue?