How to get the error (404) page into the ''dist" directory in nuxt?

Question

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:

1. If I just add a 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!

Answer 1

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