I created an error page as in the documentation and it works.
https://nuxtjs.org/docs/2.x/concepts/views#error-page
In short, I create an error.vue file in the /layouts directory and optionally pass it a custom 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>
But my product task requires the 404 page to go into the /dist directory after the generate command.
Like this
dist/
--| 200.html
--| 404.html //do not exist for me
The following solutions didn't help:
404 page to the /pages directory, then Nuxt will still show its default error page.Is there a laconic way to do this? Thanks in advance!
I managed to solve my problem by adding this code to nuxt.config.js.
router: {
extendRoutes(routes, resolve) {
routes.push({
name: 'custom',
path: '*',
component: resolve('@/pages/404.vue')
})
}
},
Now 404.vue is in the /pages directory, and the 404.html page is in the /dist directory.
Documentation: https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-router#extendroutes