NuxtJS：在开发中工作但在生产中工作的路由（netlify）答案

【问题标题】：NuxtJS: routes working in dev but not production (netlify)NuxtJS：在开发中工作但在生产中工作的路由（netlify）
【发布时间】：2021-10-09 18:22:20
【问题描述】：

仍然在学习 JS，但我正在努力解决这个问题。

在 VS 代码调试环境中，一切正常，但是当我部署到 Netlify 时，某些路由仅在某些时候工作。例如，this route 以及其他 /interests 路由，或者 404，加载一个空白页面，或者偶尔可以正常工作。

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

我在开发环境中没有看到与此相关的错误。我还是 js 故障排除的新手，但是当我在 Chrome 中加载开发工具时，有时会看到错误“DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.”

我研究了该错误导致我发布了一些关于该主题的帖子：

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

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

【问题讨论】：

标签： javascript vue.js nuxt.js nuxt-content

【解决方案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 错误。

【讨论】：