Nuxt 2中如何为静态目录添加自定义错误页面？

Nuxt 2的默认路由机制仅处理页面级别的404请求，静态资源的请求会直接由底层服务器（开发时为Nuxt自带的Node服务器，生产时多为Nginx/Apache等）接管，因此常规的页面错误页配置对静态资源无效。以下是几种可行的解决方案：

方案一：通过Server Middleware捕获静态资源404（适用于nuxt start启动的场景） #

利用Nuxt的serverMiddleware拦截所有请求，包括静态资源请求，捕获404后返回自定义错误页：

1. 在项目根目录创建server-middleware/static-404.js文件，写入以下代码：

const fs = require('fs')
const path = require('path')

module.exports = function (req, res, next) {
  // 定义静态资源的路径规则，可根据实际情况调整
  const isStaticResource = req.url.startsWith('/static/') || 
                          req.url.startsWith('/_nuxt/') || 
                          (req.url.includes('.') && !req.url.includes('.html'))
  
  const filePath = path.join(__dirname, '../', req.url.slice(1))
  fs.access(filePath, fs.constants.F_OK, (err) => {
    if (err && isStaticResource) {
      // 资源不存在时，读取自定义404页面并返回
      const errorPagePath = path.join(__dirname, '../', 'dist/404.html')
      fs.readFile(errorPagePath, 'utf8', (readErr, data) => {
        if (readErr) {
          res.writeHead(404, {'Content-Type': 'text/html'})
          res.end('<h1>404 - 资源不存在</h1>')
        } else {
          res.writeHead(404, {'Content-Type': 'text/html'})
          res.end(data)
        }
      })
    } else {
      next()
    }
  })
}

2. 在nuxt.config.js中注册该中间件：

export default {
  serverMiddleware: [
    './server-middleware/static-404.js'
  ]
}

注意：开发环境下需确保自定义404页面已生成；生产环境使用nuxt build+nuxt start时，可根据实际生成路径调整errorPagePath。

方案二：服务器层面配置（适用于Nginx/Apache部署场景） #

直接在服务器配置中设置全局404规则，指向自定义错误页面：

Nginx配置示例 #

在站点配置文件中添加：

server {
  # 其他已有配置...
  error_page 404 /404.html;
  location = /404.html {
    root /path/to/your/nuxt/dist; # 指向Nuxt生成的dist目录
    internal;
  }
}

Apache配置示例 #

在.htaccess或Apache主配置中添加：

ErrorDocument 404 /404.html

确保404.html存在于Nuxt项目的static目录或生成的dist目录中。

方案三：静态生成（nuxt generate）场景 #

1. 自定义错误页面：在layouts/error.vue中编写404页面内容：

<template>
  <div class="error-page">
    <h1>404 - 页面或资源不存在</h1>
    <p>抱歉，你访问的内容无法找到</p>
    <nuxt-link to="/">返回首页</nuxt-link>
  </div>
</template>

<script>
export default {
  props: ['error'],
  head() {
    return {
      title: '404 - 资源不存在'
    }
  }
}
</script>

2. 执行nuxt generate后，dist目录会自动生成404.html，再配合方案二中的服务器配置，即可让静态资源的404请求跳转到该页面。

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