如何在NUXT项目中正确配置301重定向 旧URL访问返回404问题求助

现有配置失效原因 #

• 路由触发范围限制：你在nuxt.config.js中给serverMiddleware指定了path: "/api/redirects"，只有请求路径匹配/api/redirects/*的请求才会执行这个重定向中间件，普通页面路径完全不会触发，自然访问旧地址直接返回404。
• 匹配规则错误：你redirects数组中from字段写的是带域名的完整URL，但Node原生的req.url只能拿到域名后的路径部分（比如访问https://www.example.com/jobs时req.url是/jobs），完全匹配不上你写的完整URL，所以重定向逻辑永远不会执行。

快速修复现有配置 #

第一步：修改nuxt.config.js配置 #

去掉serverMiddleware的path限制，让所有请求都经过重定向中间件：

// nuxt.config.js
serverMiddleware: [
  "~/api/redirects/index.js"
]

第二步：修改重定向中间件的匹配规则 #

把from字段改为纯路径，和req.url的返回格式对齐：

const redirects = [
  { from: '/article/new-guidelines-new-normal-new-opportunities-new-working-environments', to: 'https://www.example.com' },
  { from: '/article/vetting-candidate-why-its-a-no-brainer', to: 'https://www.example.com' },
  { from: '/job-alerts', to: 'https://www.example.com' },
  { from: '/jobs', to: 'https://www.example.com' },
  { from: '/news', to: 'https://www.example.com' },
  { from: '/login', to: 'https://www.example.com' },
  { from: '/cv-upload', to: 'https://www.example.com/#submit-cv' },
  { from: '/expertise', to: 'https://www.example.com/our-expertise' }
]
 
module.exports = function (req, res, next) {
  const redirect = redirects.find(r => r.from === req.url)
  if (redirect) {
    console.log(`redirect: ${redirect.from} => ${redirect.to}`)
    res.writeHead(301, { Location: redirect.to })
    res.end()
  } else {
    next()
  }
}

最优配置方案 #

Nuxt2项目推荐使用官方维护的@nuxtjs/redirect-module，无需手写中间件，支持正则批量匹配、动态路由重定向等能力，配置更简洁易维护：

1. 安装依赖：
   npm install @nuxtjs/redirect-module
2. 配置nuxt.config.js：

// nuxt.config.js
modules: [
  '@nuxtjs/redirect-module'
],
redirect: [
  // 支持正则批量匹配所有/article开头的路径
  { from: '^/article/.*$', to: '/', statusCode: 301 },
  { from: '/job-alerts', to: '/', statusCode: 301 },
  { from: '/jobs', to: '/', statusCode: 301 },
  { from: '/news', to: '/', statusCode: 301 },
  { from: '/login', to: '/', statusCode: 301 },
  { from: '/cv-upload', to: '/#submit-cv', statusCode: 301 },
  { from: '/expertise', to: '/our-expertise', statusCode: 301 }
]

Nuxt3项目可以直接在~/middleware目录下创建全局重定向中间件，或者使用nuxt-redirect模块，配置逻辑和上述一致。

注意：301重定向为永久重定向，会被浏览器长期缓存，修改配置后测试请使用浏览器隐身模式，或者清空浏览器缓存，避免旧缓存干扰测试结果。

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