[英]nuxt generate throws error for dynamic page nuxt.js
I can not seem to figure out what the issue is here...我似乎无法弄清楚这里的问题是什么......
I have created a blog with pagination using nuxt.js now in my nuxt.config.js
I have a method that gets the posts from contentful like so我现在在我的
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;
};
then when I generate the routes I do the following...然后当我生成路线时,我会执行以下操作...
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;
}
},
then in my _page/index.vue
然后在我的
_page/index.vue
<script>
export default {
components: {
//...
},
aysnc asyncData(context) {
if(context.payload) {
return {
blogPosts: context.payload.data.items.slice(0, 8)
}
} else {
//...
}
}
}
</script>
now when Im running this locally the page works fine no errors etc.. but on nuxt generate
I get现在,当我在本地运行此页面时,页面工作正常,没有错误等。但是在
nuxt generate
我得到了
ERROR: Error generating /page/1
now I've tried to console.log()
the blogPosts on mounted()
but It never fires.现在我已经尝试在
mounted()
上console.log()
blogPosts 但它永远不会触发。
I can not figure out what is wrong here, Ive tried to strip back everything and made my _page/index.vue
to look like this我无法弄清楚这里出了什么问题,我试图剥离所有内容并使我的
_page/index.vue
看起来像这样
<template>
<div>
<h1>hello</h1>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
but I still get the generate error I've console.log()
routes and I get this但我仍然收到生成错误我有
console.log()
路由,我得到了这个
[ 11:39:44
{
route: '/page/1',
payload: {
data: [Array]
}
}
]
which looks correct, so why is the page erroring??看起来是正确的,为什么页面出错了??
edit 1编辑 1
When I check my dist folder the page 1 index.html is there but in the html it says this page could not be found
当我检查我的 dist 文件夹时,页面 1 index.html 在那里,但在 html 中它说
this page could not be found
any help would be appreciated thanks or is there a way to get a better error message任何帮助将不胜感激,或者有没有办法获得更好的错误消息
edit 2编辑 2
All of my individual blog pages build correctly, but the actual /page/1 is the only one that is failing I have put a try catch around the whole async generate method and there are no errors.. also If I console.log all the routes it appears as if it is all correct我所有的个人博客页面都正确构建,但实际的 /page/1 是唯一一个失败的我在整个异步生成方法周围放置了一个 try catch 并且没有错误......如果我 console.log 所有路线看起来好像都是正确的
[ 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]
}
}
]
all of the other pages are generated correctly所有其他页面都正确生成
I am an idiot..我是一个白痴..
The route that needed to be generated was /blog/page/1
not /page/1
需要生成的路由是
/blog/page/1
而不是/page/1
so I updated this所以我更新了这个
for (let i = 1; i <= postsNum; i++) {
routes.push({
route: '/blog/page/' + i,
payload: {
data: posts.items.splice(i === 1 ? 0 : i * 10, 10)
}
});
}
Once that was fixed.. it built correctly!一旦修复..它构建正确!
Make sure to triple check your generated route names...确保三重检查您生成的路线名称...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.