0
400
ViewsNuxtJS: rutas que funcionan en desarrollo pero no en producción (netlify)
Todavía estoy aprendiendo mucho JS, pero estoy luchando con este problema.
En el entorno de depuración de código VS, todo funciona, pero cuando implemento en Netlify, algunas rutas funcionan solo algunas veces. Por ejemplo, esta ruta , junto con las otras rutas /intereses, ya sea 404, carga una página en blanco o, en ocasiones, simplemente funciona.
El código detrás de esas páginas está aquí . Las otras páginas de contenido nuxt en /posts, /tags y /wip funcionan bien.
No recibo errores que pueda ver relacionados con esto en el entorno de desarrollo. Todavía soy nuevo en la resolución de problemas de js, pero cuando cargo las herramientas de desarrollo en Chrome, a veces veo el error "DOMException: no se pudo ejecutar 'appendChild' en 'Nodo': este tipo de nodo no es compatible con este método".
Investigué ese error que me llevó a algunas publicaciones sobre el tema:
- Problema con Nuxtjs
- Error de Vuejs en el lado del cliente
- Errores de hidratación blog pos
- no se pudo ejecutar el nodo 'appendChild'
- Errores 404 de carga útil de páginas dinámicas en modo estático completo
Probé varias soluciones a partir de ahí, incluida la sustitución de v-if por v-show, la limpieza de las etiquetas <p> y la inclusión de varias cosas en <client-only> pero el problema persiste.
¿Alguien tiene idea de lo que estoy haciendo mal?
1 answers
Answer question0
Resolví tu problema, el blog arreglado se puede ver aquí
https://brians-spare-time-blog.netlify.app/interests/film-photography/
En su archivo Sidebar.vue tiene
<template> <div class="sidebar"> <div v-if="isPanelOpen" class="sidebar-backdrop" @click="closeSidebarPanel" /> <transition name="slide"> <div v-if="isPanelOpen" class="sidebar-panel"> <slot /> </div> </transition> </div> </template> Luego, la slot se usa en layouts/default.vue con lo siguiente
<Sidebar> <ul class="sidebar-panel-nav" @click="closeSidebarPanel"> <li> • <nuxt-link to="/interests/film-photography"> Film Photography </nuxt-link> </li> </ul> </Sidebar>Entonces, el rastreador de Nuxt debería poder generarlo, pero por alguna razón, tener
<div v-if="isPanelOpen">es un bloqueador para él. Esto probablemente tenga que ver con la forma en que administra su tienda Vuex aquí. Podría depurar más en profundidad para ver por qué esto no está manejando el estado correctamente, nuxtServerInit podría ser útil para esto.
Mientras tanto, aquí hay una solución rápida
<div v-show="isPanelOpen">De esta manera, la barra lateral siempre estará en el DOM y ayudará al rastreador a hacer su trabajo correctamente. Como puedes ver, tu blog ya está activo.
El uso de yarn generate podría ser un depurador rápido porque señalará si la página que desea realmente se genera o no.
De lo contrario, también podría generar las páginas manualmente en su nuxt.config.js pero esto es bastante excesivo en su situación.
PD: tiene algunos errores de ESlint en su clave de build nuxt.config.js .
Recomiendo arreglar esos. O cualquier error de ESlint tbh.