Question

我似乎无法弄清楚问题出在哪里...

我现在在nuxt.config.js中使用nuxt.js创建了具有分页功能的博客，我有一种方法可以像这样从内容丰富的帖子中获取帖子

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上，我得到

ERROR: Error generating /page/1

现在我已经尝试console.log()上的mounted()博客文章，但是它永远不会触发。

我无法弄清楚这里出了什么问题，我尝试剥离所有内容，使我的_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]
    }
  }
]

看起来正确，为什么页面会出错？

修改

当我检查我的dist文件夹时，页面1 index.html在那里，但是在html中它显示this page could not be found

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

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)
      }
    });
}

一旦修复，就可以正确构建！

请务必仔细检查您生成的路线名称...

nuxt为动态页面nuxt.js生成引发错误

1 个答案: