时间戳

首页 > 解决方案 > 如何将错误（404）页面放入nuxt中的“dist”目录？

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

问题描述

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

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页面进入命令/dist后的目录generate。

像这样

dist/
--| 200.html
--| 404.html //do not exist for me

以下解决方案没有帮助：

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

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

标签： javascriptvue.jsnuxt.jscustom-error-pages

解决方案

我设法通过将此代码添加到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

推荐阅读