如何解决为什么我的 nuxt 静态站点不提供在 Dist 文件夹中找到的静态 html 文件?
我使用 Nuxt 创建了一个博客,其中包含我的每篇文章的动态路由(articles/_slug.vue)。在 _slug.vue 文件中,我使用 asyncData 从 Strapi CMS 中抓取标记内容。
在运行 nuxt generate 和 nuxt start 并导航到浏览器中的文章页面后,当我打开页面源代码时,我发现有许多 Js 文件被导入了 /_nuxt/{randomNumbers}.js 和一个带有 id __nuxt 的 div,很可能类似于 SPA 格式。
这不会发生在我的 index.vue 页面上,因为当我查看 index.vue 的页面源时,我的所有内容都在 HTML 中。
Google 爬虫能够索引我文章页面上的内容很重要,因此不包含博客内容的页面来源并不理想。
我不明白的是,当我打开由 nuxt 生成的 dist 文件夹时,我发现我的所有文章都位于包含用我的博客内容硬编码的 HTML 文件的子文件夹中。所以我想知道为什么 nuxt 不提供这些 HTML 文件,有没有办法这样做?
解决方法
据我所知,所有页面和组件都包含在一个名为 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 后,可以在页面源中找到博客内容。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。