Primero, para demostrar lo que quiero decir, he creado un blog de demostración de Nuxt en https://debadeepsen.com/nuxtblog/ . Tiene los artículos poblados por el @nuxt/content . El sitio web implementado se generó a través del comando nuxt generate y, como tal, es completamente estático. Ahora realice las siguientes acciones:

• Vaya a la página de inicio y haga clic en cualquiera de los enlaces.
• Te lleva al artículo que solicitaste.
• Desde la página del artículo, puede hacer clic en cualquier otro enlace, que lo llevará a un artículo diferente.

Los pasos dados anteriormente conducen a los resultados esperados. Pero ahora, recarga cualquiera de las páginas del artículo. Notarás lo siguiente:

• Se agregó una barra inclinada final (/) a la URL en la barra de direcciones (no he probado en todos los navegadores, pero esto parece suceder al menos en los basados en Chromium).
• Las URL de los enlaces ahora tienen el segmento de slug actual como parte de la URL base, presumiblemente debido a lo anterior. Entonces, por ejemplo, el segundo enlace ahora apunta a https://debadeepsen.com/nuxtblog/what-is-settimeout/what-is-settimeout o https://debadeepsen.com/nuxtblog/vintage-photo-effect-with -css/what-is-settimeout (dependiendo de la página que recargaste).

Obviamente, estas páginas no existen y, por lo tanto, los enlaces ahora están rotos.

Mi código es bastante sencillo. Aquí está el menú de navegación:

 <ul> <li v-for="article in list" :key="article.slug"> <nuxt-link :to="article.slug"> {{ article.title }} </nuxt-link> </li> </ul>

La list de variables de estado tiene datos correctos, no hay problema.

En mi nuxt.config.js , tengo -

 export default { // ... router: { base: '/nuxtblog/' }, // ... }

Entonces, ¿qué estoy haciendo mal aquí y cómo puedo solucionar este problema?