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

Question

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

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

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

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

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

我从那里尝试了各种解决方案，包括用 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 可能是一个快速调试器，因为它会指出您想要的页面是否实际生成。

否则，您也可以，但这在您的情况下太过分了。

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

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

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

javascript

vue.js

nuxt.js

nuxt-content