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

Question

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

aricles/_slug.vue

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

page source of an article

我的 index.vue 页面不会出现这种情况，因为当我查看 index.vue 的页面源代码时，我所有的内容都在 HTML.

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

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

distFolder

Answer 1

据我所知，所有页面和组件都放在一个名为 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
  }
}

Answer 2

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

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

Why doesn't my nuxt static site serve the static html files found in the Dist folder?

vue.js

nuxt.js

nuxt-strapi