如何将错误（404）页面放入nuxt中的“dist”目录？答案

【问题标题】：How to get the error (404) page into the ''dist" directory in nuxt?如何将错误（404）页面放入nuxt中的“dist”目录？
【发布时间】：2021-08-03 11:31:25
【问题描述】：

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

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

以下解决方案没有有帮助：

如果我只是将404 页面添加到/pages 目录，那么 Nuxt 仍会显示其默认错误页面。

有没有一种简洁的方法来做到这一点？提前致谢！

【问题讨论】：

一开始为什么需要404 页面？ Nuxt 正在为您处理此问题。
@kissu nginx 的配置是这样的，如果找不到页面，它希望找到一个 404 页面来给它。如果他没有找到它，那么他就会给出他的标准。

标签： javascript vue.js nuxt.js custom-error-pages

【解决方案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

【讨论】：