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

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

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

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

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

其他资源都是通过引入到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 文件。

相关推荐
杨进军8 分钟前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW23 分钟前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字29 分钟前
Kotlin lazy 委托的底层实现原理
前端
gnip1 小时前
总结一期正则表达式
javascript·正则表达式
爱分享的程序员1 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘1 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出1 小时前
万字长文带你了解微前端架构
前端·微服务·前端框架
你这个年龄怎么睡得着的1 小时前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
Java水解1 小时前
前端常用单位em/px/rem/vh/vm到底有什么区别?
前端
CAD老兵1 小时前
Vite 如何借助 esbuild 实现极速 Dev Server 体验,并支持无 source map 的源码调试
前端