javascript - NuxtJS : routes working in dev but not production (netlify)

Question

仍在学习 JS，但我正在为这个问题而苦苦挣扎。

在 VS 代码调试环境中，一切正常，但当我部署到 Netlify 时，某些路由有时会正常工作。例如，this route ，连同其他/interests 路由，要么是 404，要么是加载空白页面，要么只是偶尔有效。

这些页面背后的代码是here ./posts、/tags 和/wip 中的其他 nuxt-content 页面都可以正常工作。

我在开发环境中没有看到与此相关的错误。我对 js 故障排除还是个新手，但是当我在 Chrome 中加载开发工具时，有时会看到错误“DOMException:无法在‘Node’上执行‘appendChild’:此节点类型不支持此方法。”

我研究了这个错误，导致我发表了一些关于该主题的帖子:

• Nuxtjs issue
• Vuejs error on client side
• Hydration errors blog pos
• failed to execute 'appendChild' node
• full static mode dynamic pages payload 404 errors

我从那里尝试了各种解决方案，包括用 v-show 替换 v-if，以及清理 <p>标签，并将各种东西包装在 <client-only> 中但问题仍然存在。

有人知道我做错了什么吗？

Answer 1

我解决了你的问题，修复的博客可以在这里看到
https://brians-spare-time-blog.netlify.app/interests/film-photography/

在你的 Sidebar.vue 文件中你有

<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>

然后 slot 被用于 layouts/default.vue 中，如下所示

<Sidebar>
  <ul class="sidebar-panel-nav" @click="closeSidebarPanel">
    <li>
      &#8226;
      <nuxt-link to="/interests/film-photography">
        Film Photography
      </nuxt-link>
    </li>
  </ul>
</Sidebar>

因此，Nuxt 爬虫应该能够生成它，但由于某种原因，具有

<div v-if="isPanelOpen">

是他的障碍。这可能与您在这里管理 Vuex 商店的方式有关。您可以更深入地调试以了解为什么这不能正确处理状态，nuxtServerInit可能对此有用。

同时，这里有一个快速修复

<div v-show="isPanelOpen">

这样，侧边栏将始终位于 DOM 中，它有助于爬虫正确地完成工作。如您所见，您的博客现已上线。

使用 yarn generate 可能是一个快速调试器，因为它会指出您想要的页面是否实际生成。

否则，你也可以generate the pages manually in your nuxt.config.js但这在您的情况下太过分了。

---

PS:您的 nuxt.config.js、build 键中确实存在一些 ESlint 错误。
我确实建议修复这些。或任何 ESlint 错误。