vue.js - nuxt 为动态页面 nuxt.js 生成抛出错误

Question

我似乎无法弄清楚这里的问题是什么......

我现在在我的 nuxt.config.js 中使用 nuxt.js 创建了一个分页博客，我有一个方法可以像这样从 contentful 中获取帖子

const getBlogPosts = async () => {
  let blogPosts = await client.getEntries({ order: '-sys.createdAt', limit: 1000, content_type: config.CTF_BLOG_POST });
  return blogPosts;
};

然后当我生成路由时，我会执行以下操作...

generate: {
    routes: async () => {
      const posts = await getBlogPosts();
      const routes = [];
      let postsNum = Math.ceil(posts.items.length / 10); // get the page numbers
      for (let i = 1; i <= postsNum; i++) {
        routes.push({
          route: '/page/' + i,
          payload: {
            data: posts.items.splice(i === 1 ? 0 : i * 10, 10)
          }
        });
      }
      return routes;
    }
  },

然后在我的 _page/index.vue

<script>
export default {
    components: {
     //...
    },
    aysnc asyncData(context) {
        if(context.payload) {
            return {
                blogPosts: context.payload.data.items.slice(0, 8)
            }
        } else {
            //...
        }
    }
}
</script>

现在，当我在本地运行这个页面时，页面工作正常，没有错误等。但是在 nuxt generate 上，我得到了

错误:生成/page/1 时出错

现在我已经尝试 console.log() mounted() 上的 blogPosts 但它永远不会触发。

我不知道这里出了什么问题，我试图剥离所有内容并使我的 _page/index.vue 看起来像这样

<template>
    <div>
        <h1>hello</h1>
    </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

但我仍然收到生成错误我有 console.log() 路由并且我得到了这个

[                                                                                                 11:39:44  
  {
    route: '/page/1',
    payload: {
      data: [Array]
    }
  }
]

看起来是对的，为什么页面会出错？？

编辑1

当我检查我的 dist 文件夹时，页面 1 index.html 在那里，但在 html 中它说 找不到此页面

任何帮助将不胜感激，或者有没有办法获得更好的错误消息

编辑2

我所有的个人博客页面都正确构建，但实际/page/1 是唯一失败的页面我已经 try catch 整个异步生成方法并且没有错误..如果我安慰。记录所有看起来好像都是正确的路线

[                                                                                                 08:58:38
  {
    route: '/blog/6gQUEUwex7mjNtAXY4ZlTO',
    payload: {
      data: [Object]
    }
  },
  {
    route: '/blog/2xDAv0zSt4kUfxOV1XC98C',
    payload: {
      data: [Object]
    }
  },
  {
    route: '/blog/6f6shGDflvuBUMZn25sIbE',
    payload: {
      data: [Object]
    }
  },
  {
    route: '/blog/24Sov29BazGj52WEQdJGiy',
    payload: {
      data: [Object]
    }
  },
  {
    route: '/blog/r2ky97Vg8u6rouiVXdSzd',
    payload: {
      data: [Object]
    }
  },
  {
    route: '/blog/2QnIl7GOScQ31A7EcRVgT1',
    payload: {
      data: [Object]
    }
  },
  {
    route: '/blog/1bEUOT5Xnm7CU9Njd5xkeu',
    payload: {
      data: [Object]
    }
  },
  {
    route: '/blog/7FUON1DcQcGQnvdp7Kxfbe',
    payload: {
      data: [Object]
    }
  },
  {
    route: '/page/1',
    payload: {
      data: [Array]
    }
  }
]

所有其他页面都正确生成

Answer 1

我是个白痴..

需要生成的路由是/blog/page/1而不是/page/1

所以我更新了这个

for (let i = 1; i <= postsNum; i++) {
  routes.push({
    route: '/blog/page/' + i,
    payload: {
      data: posts.items.splice(i === 1 ? 0 : i * 10, 10)
    }
  });
}

修复后.. 构建正确!

确保三重检查您生成的路线名称...