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

【问题标题】：Why doesn't my nuxt static site serve the static html files found in the Dist folder?为什么我的 nuxt 静态站点不提供在 Dist 文件夹中找到的静态 html 文件？
【发布时间】：2021-05-26 00:39:04
【问题描述】：

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

aricles/_slug.vue

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

page source of an article

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

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

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

distFolder

【问题讨论】：

它似乎正在回退到 SPA 版本。你用什么来提供你的文件？有时你需要配置你的服务来获得正确的路由。

标签： vue.js nuxt.js nuxt-strapi

【解决方案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
  }
}

【讨论】：

感谢您的回复，关于禁用爬虫，它似乎没有产生我要求的静态页面结果。

【解决方案2】：

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

【讨论】：