一文理解配置伪静态解决 部署项目刷新页面404问题

大家好，我是Smooth，一名大二的前端爱好者，目标是想要成为一名前端开发工程师

配置伪静态解决部署项目后页面刷新404问题

网上看了很多如何解决 项目部署后刷新页面报404 的文章，解决的方式无非只有两个：

1. 将 historyRouter 变为 hashRouter （治标不治本）
2. 配置无论任何路径，都返回index.html，剩下的事情交给 React Router

但第二种不知为何我一直不奏效，直到使用了 配置伪静态 这种方法，所以本篇文章我想向很多跟我遇到同样问题的小伙伴分享一下我的解决方法

普及基本概念 Q&A

为什么会404 ？

原因很简单：当你刷新时，你首先是根据url访问的服务器资源地址，然后返回的页面内加载了对应资源，最后在浏览器进行渲染；也就是说如果这个时候报404，是因为你后台并没有针对这个路由给出返回HTML内容，也谈不上执行React Router了。

简单来说就是，没在服务器对应url路径匹配到你需要的资源

为什么不刷新就不会404，不是说服务器根据你这个路径找不到对应资源吗？

你在浏览器内可以由首页跳转到其他路由地址，是因为这是由前端自行渲染的，你在React Router定义了对应的路由，脚本并没有刷新网页访问后台，是JS动态更改了location。

为什么 hashRouter 可以，historyRouter 不行？

React是属于单页应用（single-page application）

而SPA是一种网络应用程序或网站的模型，所有用户交互是通过动态重写当前页面，前面我们也看到了，不管我们应用有多少页面，构建物都只会产出一个index.html。当我们在地址栏输入 www.xxx.com 时，这时会打开我们 nginx 配置的目录下的 index.html 文件，然后我们在跳转路由进入到 www.xxx.com/login

关键在这里，当我们在 www.xxx.com/login 页执行刷新操作，nginx location 是没有根据这路径做相关的资源返回配置的，所以就会出现 404 的情况

hashRouter

router hash 模式我们都知道是用符号#表示的，如 www.xxx.com/#/login, hash 的值为 #/login。

它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对服务端完全没有影响，因此改变 hash 不会重新加载页面

hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 www.xxx.com/#/login 只有 www.xxx.com 会被包含在请求中 ，因此对于服务端来说，即使没有配置location，也不会返回404错误

解决方案

好，说了那么多，现在就阐述解决方案
以下示例为宝塔面板

配置伪静态资源

第一步找到配置项入口

第二步 进行伪静态配置

location / {
    try_files $uri $uri/ @router;
    index  index.html;
}

location @router{
      rewrite ^.*$ /index.html last;
}

第三步 重启服务器即可

其他解决

可以使用文头所说的方法

1. 将 historyRouter 变为 hashRouter （治标不治本）
2. 配置无论任何路径，都返回index.html，剩下的事情交给React Router

只不过我对于第二种方法一直配置不生效

以上便是这篇文章的全部内容啦

最后

最后，我叫Smooth，在今年2022年我也会尽自己所能书写更多前端教程，期待你的关注~

最近发文计划为Webpack 以及 性能优化 知识体系