3

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

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

这些页面背后的代码在这里。/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>但问题仍然存在。

任何人都知道我做错了什么？

4

1 回答 1

2

我解决了你的问题，可以在这里看到固定的博客
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 中，它有助于爬虫正确地完成工作。如您所见，您的博客现已上线。

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

在此处输入图像描述

否则，您也可以在您的页面中手动生成页面，nuxt.config.js但这在您的情况下是非常过分的。

PS：您的nuxt.config.js,build键中确实有一些 ESlint 错误。
我建议修复这些。或任何 ESlint 错误。

于 2021-08-04T17:30:16.897 回答