为什么我的 nuxt 静态站点不提供在 Dist 文件夹中找到的静态 html 文件？

问题描述

我使用 Nuxt 创建了一个博客，其中包含我的每篇文章的动态路由(articles/_slug.vue)。在 _slug.vue 文件中，我使用 asyncData 从 Strapi CMS 中抓取标记内容。

在运行 nuxt generate 和 nuxt start 并导航到浏览器中的文章页面后，当我打开页面源代码时，我发现有许多 Js 文件被导入了 /_nuxt/{randomNumbers}.js 和一个带有 id __nuxt 的 div，很可能类似于 SPA 格式。

page source of an article

这不会发生在我的 index.vue 页面上，因为当我查看 index.vue 的页面源时，我的所有内容都在 HTML 中。

Google 爬虫能够索引我文章页面上的内容很重要，因此不包含博客内容的页面来源并不理想。

我不明白的是，当我打开由 nuxt 生成的 dist 文件夹时，我发现我的所有文章都位于包含用我的博客内容硬编码的 HTML 文件的子文件夹中。所以我想知道为什么 nuxt 不提供这些 HTML 文件，有没有办法这样做？

distFolder

解决方法

据我所知，所有页面和组件都包含在一个名为 Nuxt 的组件中，我认为“__nuxt”元素就是这样。顺便说一下，使用 asyncData 和 'nuxt generate' 不会使您的应用程序服务器端动态化，因为 'nuxt generate' 生成一个静态站点，并且在使用 'nuxt generate' 时，所有 asyncData 挂钩都将被调用一次。对于硬编码的博客文章，我认为您应该在 nuxt.config.js 中禁用 Nuxt Crawler。 Nuxt Docs: The Generate Property #Crawler

export default {
  generate: {
    crawler: false
  }
}

似乎在 Vercel 上托管项目后，静态行为会相应地起作用。在本地测试网站（nuxt start）时，内容没有预加载到页面源中，它继续充当动态路由上的 SPA。但是，部署到 Vercel 后，可以在页面源中找到博客内容。

nuxt-strapi nuxt.js vue.js