如何使用 vanilla Javscript 在 Vercel 上添加自定义 404 页面？

Question

我没有使用任何框架，我想添加自定义 404 页面。在 Vercel 的文档中，他们只为框架的用户提供信息。

Answer 1

请参阅自定义 404 页面 - 静态站点生成器 (SSG)

的文档

将

404.html

文件发送到输出目录，当路由与任何其他静态文件不匹配时，它将作为 404 页面。

TL;DR 在站点的根目录中创建一个

404.html

文件，Vercel 将使用该文件来处理与任何资源都不匹配的请求。

---

像 Hugo 这样的静态站点生成器会创建普通的旧 HTML 页面，这些页面（通常）不作为单页应用程序 (SPA) 运行；每个页面都有一个 HTML 文件。

这就像一个常规的、非框架的、非 SPA 的网站，与您的应用程序结构相匹配。

Answer 2

如果您想在 vercel 中添加自定义 404 页面，您必须在根文件夹中创建一个 vercel.json 文件，然后将此代码添加到您的文件中 在 React

vercel.json file 
{
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/index.html"
    }
  ]
}

/这可以完全控制index.html/

在此之前，您必须检查react-router-dom是否已安装，然后创建一个路由，该路由缓存所有期望在app.jsx或main.jsx中定义的路由

例如：

<Route path="*" element={customfilename404.jsx} >