Desarrollé una aplicación Vue.js que usa vue-router para enrutar entre componentes. Al enrutar a un componente diferente, la URL cambia.

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

Hay un botón en la interfaz de usuario que usa <router-link...> para enrutar a otro componente que cambia la ruta de / a /secondpath . Sin embargo, cuando voy directamente a .../secondpath en mi navegador, devuelve 404 .

Si ejecuto la aplicación en un entorno de desarrollo mediante npm run dev , el escenario anterior funciona. Si primero lo construyo con vite build y luego sirvo los archivos estáticos usando un servidor web, por ejemplo, express.js , obtengo el problema anterior.

Sirviendo a través de 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}`))

Solo tengo un archivo html que es index.html . ¿Qué hago mal aquí? ¿Debería crear varios archivos html y de alguna manera redirigir al usuario a otra página html , en lugar de usar <router-link...> . ¿Y cómo puedo hacer eso si ese es el problema?