我的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'
]
},
图像(如screen-one-1.jpg)在数据文件夹中。
页面被命名为_id.vue
我的nuxt应用在开发环境中运行良好,但是一旦生成静态页面,即使生成的页面中包含一些代码,包含v-for =的页面也会完全变成白色。这是错误吗?这是...
问题与'?webp'有关,与依赖项“ @ bazzite / nuxt-optimized-images”有关。我不记得是什么问题,但与v-for或nuxt本身无关。谢谢!