在 pubic 目录放置404.html
,即可实现 404 功能
举例
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 <title>404 NOT Found</title>
8 <meta name="robots" content="noindex,nofollow" />
9 <link rel="stylesheet" href="/assets/css/output.css" />
10 </head>
11 <body>
12 <main>
13 <div class="h-screen flex flex-col justify-center items-center">
14 <div class="w-1/2 max-w-screen-sm mx-auto h-96 bg-white rounded-md shadow flex flex-col justify-center items-center">
15 <p class="bg-clip-text text-xl md:text-3xl text-transparent bg-gradient-to-r from-cyan-700 to-amber-300">
16 404 NOT Found
17 </p>
18 <img class="w-1/5 mx-auto py-5" src="/assets/img/svg/404.svg" />
19 <p class="w-1/2 h-10 leading-10 py-5 text-sm flex flex-row justify-around items-center">
20 <a class="text-cyan-700" href="/">首页</a>
21 <a class="text-cyan-700" href="javascript:history.back(-1)"> 返回上一页 </a>
22 </p>
23 </div>
24 </div>
25 </main>
26 </body>
27</html>