0

我有一个带有动态页面的 Nuxt JS 网站,数据来自 RESTful API。

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

我使用nuxt generate命令构建它。

载入画面:

在此处输入图像描述

像这样查看源代码:

查看源代码显示javascript

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

如何使其跳过加载并仅包含 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 }
  },
4

3 回答 3

0

将模式设置为通用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

于 2021-09-01T13:15:22.357 回答
0

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

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

于 2020-10-05T05:38:25.473 回答
0

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

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

于 2020-10-05T10:00:36.707 回答