Nuxt 3：生产环境下404错误页面无法正常生效

这个问题本质是服务器配置不匹配导致的，和Nuxt的error.vue本身无关——开发模式用的是Nuxt内置开发服务器，已经做好了路由处理，而生产环境需要自行配置服务器路由规则，以下是常见原因及解决方式：

• 服务器未配置正确的路由重写规则
  “No input file specified”是PHP环境的典型错误，说明服务器把请求默认当作PHP脚本处理，没有将所有路由指向Nuxt的入口文件。根据部署方式调整配置：

  • 静态部署（执行nuxt generate生成dist目录）：让服务器将所有不存在的文件路由到dist/index.html，Nginx配置示例：

    server {
        listen 80;
        server_name 你的域名;
        root /路径/到/nuxt/dist;
        index index.html;
    
        location / {
            try_files $uri $uri/ /index.html;
        }
    }
    

  • SSR部署（执行nuxt build后启动node服务）：配置反向代理，将请求转发到Nuxt的node服务端口（默认3000），Nginx配置示例：

    server {
        listen 80;
        server_name 你的域名;
    
        location / {
            proxy_pass http://localhost:3000;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
        }
    }
    

• 部署方式与服务器配置不匹配

  • 若采用静态生成模式，却将服务器文档根目录指向Nuxt项目根目录而非dist目录，服务器会尝试寻找默认的index.php而非Nuxt的index.html，触发错误；
  • 若采用SSR部署，却未启动Nuxt的node服务（执行node .output/server/index.mjs），直接用web服务器访问文件，也会出现该问题。

• 托管平台默认配置干扰
  使用cPanel、Plesk这类面板时，默认开启的PHP支持或错误的文档根目录设置会导致问题：

  • 静态部署需将文档根目录设置为Nuxt的dist文件夹；
  • SSR部署需配置反向代理到Nuxt node服务的端口；
  • 关闭不必要的PHP自动解析规则。

另外确认error.vue确实放在项目根目录（与app.vue同级），开发环境正常则该位置无误，核心问题还是服务器路由规则未适配Nuxt应用。

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