如何将错误(404)页放到nuxt中的“dist”目录中？

Question

我创建了一个错误页面，就像在文档中一样，它可以工作。

https://nuxtjs.org/docs/2.x/concepts/views#error-page

简而言之，我在error.vue目录中创建了一个/layouts文件，并可选择地传递一个自定义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

以下解决方案没有帮助：

1. 如果我只是在/pages目录中添加一个404页面，那么Nuxt仍然会显示它的默认错误页面.

有一种简洁的方法吗？提前感谢！

Answer 1

我通过将这段代码添加到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