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

Posted 2023-02-22

【中文标题】NuxtJS：在开发中工作但在生产中工作的路由（netlify）

【英文标题】：NuxtJS: routes working in dev but not production (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.”

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

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> 中包装各种东西，但问题仍然存在。

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

【参考方案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 错误。