解决vercel部署的前端项目刷新后出现404的问题

在解决这个问题之前，我们要知道，前端路由的更改本质上是前端把路由重定向后再渲染相应的页面

其实服务器上根本没有相应的前端资源，所以刷新后才会说出现404这个结果

我们在打包后一般只有index.html这一个html文件，其他的css和js文件则是单独存放

其他资源都是通过引入到index.html使用

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="never">
    <meta name="referrer" content="no-referrer">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <title>React Music</title>
  <script type="module" crossorigin src="/assets/index-DCCzK_t0.js"></script>
  <link rel="stylesheet" crossorigin href="/assets/index-B6i4XJZ0.css">
</head>

<body>
    <div id="root"></div>
    <script src="https://at.alicdn.com/t/c/font_2138442_7zjnkbq1cg6.js"></script>
</body>

</html>

当路由改变时，前端路由库会解析URL从而让单页面框架生成不同虚拟DOM，最后渲染生成不同的页面，从而达到了跳转路由的目的

所以其实前端根本没有向后端发起请求！

但是你刷新页面，浏览器会以当前URL进行请求，而服务器只有index.html这一请求资源，其他都是通过link和script标签加载

所以才会404

那这就是为什么会404的原因，那我们该怎么样解决呢？？？

这不好办吗，直接把所有的请求都指向index.html，返回index.html后，路径则就会被js解析从而渲染相应页面

所以我们直接配置vercel

在根目录新建vercel.json文件，指定一个重写规则

js 复制代码

{
"rewrites": [{ "source": "/:path*", "destination": "/index.html" }]
}

":path*" 是一个通配符，表示匹配所有路径
"destination": "/index.html" 则指定了将所有请求重定向到 index.html 文件。