如何在Nuxt 2.15.8中将默认error.html替换为custom-error.html

.nuxt目录是Nuxt自动生成的临时目录，直接修改其中的文件会被覆盖，所以需要通过Nuxt官方支持的方式自定义错误页面，以下是两种可行方案：

方案一：使用render:errorPage钩子直接替换错误HTML #

在项目根目录的nuxt.config.js中添加钩子配置，读取自定义的HTML文件替换默认错误页面：

import fs from 'fs'

export default {
  hooks: {
    'render:errorPage'(err) {
      // 请确保custom-error.html存在于指定路径，比如放在static目录下
      err.errorHtml = fs.readFileSync('./static/custom-error.html', 'utf8')
    }
  }
}

方案二：自定义error.vue布局组件（推荐） #

Nuxt 2原生支持通过项目根目录的layouts/error.vue自定义错误页面，这种方式更符合框架规范，同时兼容客户端和服务器端错误：

1. 在项目根目录创建layouts/error.vue文件
2. 编写自定义错误页面内容示例：

<template>
  <div class="custom-error-container">
    <h1>出错了！</h1>
    <p>{{ error?.message || '服务器内部错误' }}</p>
    <nuxt-link to="/">返回首页</nuxt-link>
  </div>
</template>

<script>
export default {
  props: ['error'],
  layout: false // 禁用嵌套布局，避免循环引用
}
</script>

<style scoped>
.custom-error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem;
}
</style>

添加该文件后，Nuxt会自动将其作为全局错误页面使用，无需手动修改.nuxt目录下的文件。

你参考的旧文章方法在Nuxt 2.15.8中仍可使用，但官方推荐的error.vue方案更易维护且更适配框架逻辑。

内容的提问来源于stack exchange，提问作者vadimvadim