NuxtJS中如何重定向到router.base指定URL并处理子目录前缀错误访问的404问题

你的问题核心在于：当请求路径不在/test/这个base路由范围内时，Nuxt的页面中间件根本不会触发——因为Nuxt只会处理/test/前缀下的路由。要解决/tes这类外部路径的问题，得从服务器拦截层面入手，下面提供几个实用方案：

方案1：用Nuxt的Server Middleware捕获所有请求 #

Server Middleware是运行在Nuxt服务器（比如Node.js Express）层面的中间件，能捕获所有进来的HTTP请求，包括那些不在base路由下的请求。

步骤： #

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

export default function(req, res, next) {
  // 针对你提到的/tes路径，直接重定向到/test/
  if (req.path === '/tes') {
    res.writeHead(302, { Location: '/test/' });
    return res.end();
  }

  // 处理所有非/test/前缀的请求，返回自定义404
  if (!req.path.startsWith('/test/')) {
    res.statusCode = 404;
    res.setHeader('Content-Type', 'text/html');
    return res.end(`
      <div style="text-align: center; margin-top: 50px;">
        <h1>😕 页面不存在</h1>
        <p>您访问的路径有误，<a href="/test/">点击返回应用首页</a></p>
      </div>
    `);
  }

  // 正常的/test/前缀请求，交给Nuxt处理
  next();
}

2. 在nuxt.config.js中注册这个Server Middleware：

export default {
  // ... 其他配置
  router: {
    base: '/test/'
  },
  serverMiddleware: [
    { path: '/', handler: '~/server-middleware/redirect-handler.js' }
  ]
}

重启Nuxt服务后，访问localhost:3000/tes就会自动重定向到/test/，其他非/test/的路径则会显示你自定义的404页面。

方案2：生产环境用反向代理（如Nginx）配置 #

如果你的应用是用Nginx等反向代理部署的，可以直接在服务器层面配置重定向和自定义404，性能更优：

Nginx配置示例： #

server {
  listen 80;
  server_name your-domain.com;

  # 针对/tes路径重定向到/test/
  location = /tes {
    return 302 /test/;
  }

  # 处理Nuxt静态文件
  location /test/ {
    root /path/to/your/nuxt/dist;
    try_files $uri $uri/ /test/index.html;
  }

  # 所有非/test/的请求返回自定义404
  error_page 404 /custom-404.html;
  location = /custom-404.html {
    root /path/to/your/static/assets; # 自定义404页面存放路径
  }
}

方案3：复用Nuxt的_error.vue页面（进阶） #

如果你想让外部路径的404也使用Nuxt内置的_error.vue页面，可以在Server Middleware中手动渲染错误页面：

修改redirect-handler.js为：

import { createApp } from '../.nuxt/server.mjs';
import { createRenderer } from 'vue-server-renderer';

export default async function(req, res, next) {
  if (req.path === '/tes') {
    res.writeHead(302, { Location: '/test/' });
    return res.end();
  }

  if (!req.path.startsWith('/test/')) {
    const { app, router } = await createApp(req, res);
    // 跳转到Nuxt的错误页面路由
    router.push('/test/_error');
    await router.isReady();

    const renderer = createRenderer();
    const html = await renderer.renderToString(app);

    res.statusCode = 404;
    res.setHeader('Content-Type', 'text/html');
    return res.end(html);
  }

  next();
}

这个方案需要确保你的_error.vue已经配置好自定义样式，这样所有外部无效请求都会显示统一的Nuxt风格404页面。

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