如何将错误(404)页面放入nuxt中的“dist”目录中?
How to get the error (404) page into the ''dist" directory in nuxt?
我按照文档中的说明创建了一个错误页面并且它有效。
https://nuxtjs.org/docs/2.x/concepts/views#error-page
简而言之,我在 /layouts
目录中创建了一个 error.vue
文件,并可选择将自定义 layout
.
传递给它
<template>
<div>
<h1 v-if="error.statusCode === 404">Page not found</h1>
<h1 v-else>An error occurred</h1>
<NuxtLink to="/">Home page</NuxtLink>
</div>
</template>
<script>
export default {
props: ['error'],
layout: 'error' // custom layout
}
</script>
但是我的产品任务需要404
页面在generate
命令后进入/dist
目录。
像这样
dist/
--| 200.html
--| 404.html //do not exist for me
以下解决方案没有帮助:
- 如果我只是在
/pages
目录中添加一个 404
页面,那么 Nuxt 仍然会显示其 default 错误页面。
有没有简洁的方法来做到这一点?
提前致谢!
我通过将此代码添加到 nuxt.config.js
中设法解决了我的问题。
router: {
extendRoutes(routes, resolve) {
routes.push({
name: 'custom',
path: '*',
component: resolve('@/pages/404.vue')
})
}
},
现在404.vue
在/pages
目录,404.html
页面在/dist
目录
文档:
https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-router#extendroutes
我按照文档中的说明创建了一个错误页面并且它有效。
https://nuxtjs.org/docs/2.x/concepts/views#error-page
简而言之,我在 /layouts
目录中创建了一个 error.vue
文件,并可选择将自定义 layout
.
<template>
<div>
<h1 v-if="error.statusCode === 404">Page not found</h1>
<h1 v-else>An error occurred</h1>
<NuxtLink to="/">Home page</NuxtLink>
</div>
</template>
<script>
export default {
props: ['error'],
layout: 'error' // custom layout
}
</script>
但是我的产品任务需要404
页面在generate
命令后进入/dist
目录。
像这样
dist/
--| 200.html
--| 404.html //do not exist for me
以下解决方案没有帮助:
- 如果我只是在
/pages
目录中添加一个404
页面,那么 Nuxt 仍然会显示其 default 错误页面。
有没有简洁的方法来做到这一点? 提前致谢!
我通过将此代码添加到 nuxt.config.js
中设法解决了我的问题。
router: {
extendRoutes(routes, resolve) {
routes.push({
name: 'custom',
path: '*',
component: resolve('@/pages/404.vue')
})
}
},
现在404.vue
在/pages
目录,404.html
页面在/dist
目录
文档: https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-router#extendroutes