如果使用 v-for，Nuxt 会生成空白页

Question

我的 nuxt 应用程序在开发时工作正常，但是一旦我生成静态页面，包含 v-for= 的页面就完全是白色的，即使页面中有一些代码在生成时也是如此。这是一个错误吗？

页面内容如下：

<template>
  <section class="page">
    <figure v-for="n in 4">
      <picture>
        <source :srcset="require('~/data/' + detail.id + '-' + n + '.jpg?webp')" type="image/webp" />
        <source :srcset="require('~/data/' + detail.id + '-' + n + '.jpg')" type="image/jpeg" />
        <img :src="require('~/data/' + detail.id + '-' + n + '.jpg')" />
      </picture>
    </figure>
  </section>
</template>

<script>
import details from '~/data/details.json'

export default {
  asyncData ({ params }) {
    return { details }
  },
  data () {
    return {
      id: this.$route.params.id,
    }
  },
  computed: {
    detail () {
      return this.details.find(detail => detail.id === this.id)
    }
  }
}
</script>

和.json

[
  {
    "id": "screen-one"
  },
  {
    "id": "screen-two"
  },
  {
    "id": "screen-three"
  }
]

然后。因为我立即遇到了这个问题，所以我在 nuxt.config.js

中手动添加了网址

  generate: {
    routes: [
      '/screen-one',
      '/screen-two',
      '/screen-three'
    ]
  },

图像（如屏幕一1.jpg）在数据文件夹中。

页面名为 _id.vue

Answer 1

问题与“?webp”有关，与依赖项“@bazzite/nuxt-optimized-images”有关。我不记得出了什么问题，但与 v-for 或 nuxt 本身无关。谢谢！

如果使用 v-for，Nuxt 会生成空白页

Nuxt generate blank pages if using v-for

v-for

nuxt.js