时间戳

首页 > 解决方案 > Nuxt 不为组件渲染 html

html - Nuxt 不为组件渲染 html

问题描述

我正在使用 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 时出现问题，因为我希望静态页面让谷歌爬虫索引页面。索引页面生成的 html 不包含上述任何 html，它仅显示 ArticuloCard 应位于的四个空行。

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

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

感谢您的帮助，并对冗长的问题感到抱歉。

标签： htmlvue.jsnuxt.jsserver-side-rendering

解决方案

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

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

推荐阅读