Al migrar a Nuxt Content V3 para compatibilidad con LLM, nos enfrentamos a dos desafíos principales:
Pérdida de la gestión de assets de Nuxt Content Assets Problemas con rutas relativas de imágenes en archivos markdown, especialmente con URLs que terminan con o sin barras diagonales En Nuxt Content V2, los assets se manejaban automáticamente dentro de las carpetas de contenido. V3 requiere gestión manual de assets.
Las URLs con o sin barras diagonales al final pueden causar problemas con las rutas relativas de imágenes, especialmente en entornos de producción como Vercel. Necesitamos manejar estos casos específicamente.
Primero, actualiza tu nuxt.config.ts:
export default defineNuxtConfig ( {
nitro : {
plugins : [ ' ~/scripts/copy-content-images ' ]
}
} )
Crea un middleware del servidor para manejar el servicio de imágenes en desarrollo:
// server/middleware/serve-images.ts
import { join } from ' node:path '
import { readFileSync , existsSync } from ' node:fs '
import { defineEventHandler } from ' h3 '
// ... código del middleware ...
Este middleware:
Intercepta peticiones de imágenes Las sirve directamente desde el directorio de contenido Maneja múltiples formatos de imagen Funciona perfectamente en desarrollo Para manejar correctamente las rutas relativas, implementamos una función de transformación al obtener contenido:
const { data : post } = await useAsyncData ( ' page- ' + path , async () => {
return queryCollection ( ' content ' ) . path ( path ) . first () ;
}, {
transform : ( data ) => {
data . body . value = updateImageSources ( data . body . value , data . path ) ;
return data ;
}
} )
La función de transformación procesa recursivamente el array de contenido markdown y convierte las rutas relativas en absolutas.
El plugin Nitro maneja la copia de assets durante la compilación La función de transformación procesa el contenido markdown para corregir las rutas Manejo especial para despliegues en Vercel a través de comprobaciones de entorno Mantiene la estructura organizada del contenido Copia automática de assets durante la compilación Compatible con Nuxt Content V3 y Nuxt LLM Sin sobrecarga en tiempo de ejecución La resolución de rutas puede necesitar atención manual en algunos casos extremos Los entornos de desarrollo y producción pueden comportarse de manera diferente Los despliegues en Vercel requieren configuración adicional Se necesita recompilar manualmente cuando cambia el contenido Usar siempre formatos de ruta consistentes en archivos markdown Probar tanto con como sin barras diagonales al final Verificar rutas de imágenes tanto en desarrollo como en producción Considerar usar rutas absolutas cuando sea posible Implementar una resolución de rutas más robusta Crear un comportamiento unificado entre desarrollo y producción Añadir pruebas automatizadas para resolución de rutas Considerar implementar una capa de caché Usar un transformador de nuxt content