如何在 Nuxt 3 中快速配置 404 错误页面？

相较于 Nuxt 2 中较为繁琐的错误页面配置，Nuxt 3 提供了更为简洁优雅的解决方案，让你轻松告别配置烦恼，将精力集中在更重要的业务逻辑上。

Nuxt 3 极简 404 配置

无需复杂的路由配置，无需额外的插件引入，只需简单一步即可完成 Nuxt 3 中的 404 页面设置：

1. 创建 error.vue 文件: 在项目根目录下创建 error.vue 文件，Nuxt 3 会自动将其识别为全局错误页面。

   <template>
       <div class="wrap">
           <div class="logo">
               <h1>404</h1>
               <p>The Page not Found-找不到你要访问的页面</p>
               <div class="sub">
                   <p><a href="/">Back</a></p>
               </div>
           </div>
       </div>
   </template>
   
   <style scoped>
   /* ...自定义样式 */
   </style>
   

就是这么简单！当你访问一个不存在的页面时，Nuxt 3 会自动渲染 error.vue 的内容。

自定义错误页面样式

当然，你也可以根据自己的设计需求，自定义错误页面的样式，让其更符合你的网站风格。

在上面的示例代码中，我们已经添加了一些基础的 CSS 样式，你可以根据自己的喜好进行修改。

总结

Nuxt 3 极简的 404 错误页面配置，让你摆脱繁琐的配置流程，专注于更重要的开发任务。同时，你依然可以自由定制错误页面的样式，打造独一无二的用户体验。