Nuxt 不为组件渲染 html

Question

我正在使用 nuxt 和 nuxt generate 构建一个在线商店，用于在 Apache 上部署我的应用程序。

我创建了一个名为 ArticuloCard 的组件，它代表我要销售的一种产品。该组件包含产品图片、描述、价格等。

我在我的索引页面上使用这个组件来展示一些这样的特色产品：

<v-layout wrap>
  <v-flex v-for="(articulo, j) in filteredArticulos" :key="j" class="md3 lg3" d-flex>
    <ArticuloCard v-bind:articulo="articulo" v-bind:dest="false"/>
  </v-flex>
</v-layout>

此时，当我在开发模式下运行我的应用程序时，一切正常。如果我在浏览器上检查页面的源代码，html 是正确的，它包含所有的 href、价格、图像等。

当我运行 nuxt generate 时出现问题，因为我希望页面处于静态状态，以便 google 爬虫为页面编制索引。 索引页面生成的 html 不包含上述任何 html，它只显示了 ArticuloCard 应该在的四个空行。

由于没有链接可以跟踪，谷歌爬虫无法索引整个页面，它在主页上停止。

我不知道这是否是使用 nuxt generate 时的预期行为，但我猜它应该呈现组件，因为它是一个静态站点。任何人都知道我可以实现这一点或知道打印 html 的任何其他方式吗？

感谢您的帮助，对于这个冗长的问题，我们深表歉意。

Answer 1

您是否从 API 调用中检索 filteredArticulos？如果是这样，请查看 NuxtJS 的 asyncData。

问题可能是因为您没有在服务器端正确检索数据。