解决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
文件。