NuxtJS - 将所有错误的 url 重定向到 404 页面答案

【问题标题】：NuxtJS - Redirect all wrong url's to 404 pageNuxtJS - 将所有错误的 url 重定向到 404 页面
【发布时间】：2020-05-16 22:38:42
【问题描述】：

哟，

我有一个问题，因为我无法以我的方式解决它。我需要将所有错误的网址（“例如 mywebsite.com/asdasdasdasd”）重定向到 mywebsite.com/404。我该怎么做？我尝试在 pages 文件夹中使用 *.vue 和 _.vue，但是当我尝试输入错误的 url 时，我的网站在 localhost 上也崩溃了

【问题讨论】：

您能告诉我们您尝试过哪些我们可以查看的内容吗？

标签： vue.js redirect routing vue-router nuxt.js

【解决方案1】：

如果您在universal 模式下使用nuxt.js（这意味着您也有服务器端代码），那么您可以使用Nuxt.js serverMiddleware。

您可以使用重定向逻辑创建一个新的/serverMiddleware/redirects.js 文件：

const redirects =
[
  { "from": "/asdasdasdasd", "to": "/404" },      
]

module.exports = function (req, res, next) {
  const redirect = redirects.find(r => r.from === req.url)
  if (redirect) {
    console.log(`301 redirect: ${redirect.from} => ${redirect.to}`)
    res.writeHead(301, { Location: redirect.to })
    res.end()
  } else {
    next()
  }
}

然后将此作为serverMiddleware 添加到nuxt.config.js：

serverMiddleware: [
  '~/serverMiddleware/redirects'
]

如果您有一些 URL 需要重定向，这是最简单的解决方案。您可以更改此代码以重定向具有给定模式的所有 url。

【讨论】：