如何在 Nuxt JS 动态页面中显示完整 HTML？

Question

我有一个动态页面的Nuxt JS网站，数据来自RESTful API.

当我访问该页面时，它显示圆圈加载屏幕，然后加载内容。

我使用 nuxt generate 命令构建它。

加载屏幕：

这样查看源代码：

该视图源显示加载指示器。

如何让它跳过加载并只包含 HTML 的结果？我这样做是为了 SEO

我的异步数据：

  async asyncData({ $axios, route }) {
    const response = await $axios.$get('/v1/items/' + route.params.slug)
    const coverImage = response.data.images.find((e) => e.cover)

    return { item: response.data, coverImage }
  },

Answer 1

运行 nuxt generate 将静态生成您的站点。但是，如果您没有在呈现时获取内容，您将只是静态生成一个空的 HTML 页面以在浏览器中获取内容。您需要在构建步骤中获取数据。

你是怎么做到的？通过使用 nuxt generate 属性。您将使用它而不是您现在使用的 asyncData 属性。此处的文档中提供了与您演示的示例非常相似的示例：https://nuxtjs.org/guides/configuration-glossary/configuration-generate#routes

Answer 2

我在这里找到解决方案https://www.youtube.com/watch?v=nngsKhTb2BA

我需要一个节点服务器运行。这样我的网站就会在服务器端（SSR）生成。

Answer 3

在 nuxt.config.js 中将模式设置为通用模式。它生成为单页应用程序 (SPA)。

如果它是生成的页面，那么来自 API 的数据将不会显示在静态 html 文件中。您需要将 nuxt.js 应用程序作为带有节点后端的 SSR。

//nuxt.config.js
{
  //.....other config

  mode: "universal"
}

更多：https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-mode

如何在 Nuxt JS 动态页面中显示完整 HTML？

How to show full HTML in Nuxt JS dynamic pages?

nuxt.js

nuxtjs