Nginx解决history模式下页面刷新404

前置知识

1. 单页应用(SPA - single page application)只在第一次加载页面时，返回唯一的html页面和它的公共静态资源，后续的页面跳转都不会从服务端拿html文件。（hash和history路由实现浏览器url变化而不刷新页面）

2. hash路由例子：www.baidu.com/#/home, 原本hash是用来结合锚点实现页面试图的控制，当#后面的值发生改变时不会重新请求页面，主要通过window的onhashchange方法来实现。

3. history路由相比于hash路由，最直观的变化就是路由中没有#，通过调用window.history对象上的一系列方法来实现页面的无刷新跳转（pushState、replaceState）。

页面加载原理：

history模式下，因为url改变了，此时如果手动刷新页面，浏览器认为是请求一个新的页面（发起新的Http请求），而新的页面是不存在的（后端未配置的话），导致404。先简述一下在浏览器上输入IP或域名后发生的事情（有点面试题的味道了嗷🥴），按下回车之后，浏览器发出的http去请求html文件，在通过一系列的转发和寻址解析后，被目标IP所在服务器上的80端口（默认）接收，这个时候，问题来了哈，服务器的80接口拿到Http请求后，它不知道要去返回什么，这个时候就需要Nginx进行静态资源代理，告诉服务器返回什么静态文件。

解决刷新后出现404的问题：

由上面的知识可以知道，刷新后，浏览器根据当前的url去请求html文件，但是SPA只有一个html文件，所以需要在nginx.conf的对应location里配置一行代码 try_files $uri $uri/ /index.html; 告诉nginx如果按顺序检查文件是否存在，若不存在则重定向到index.html文件

#重点 配置根目录的重写设置
location / {
   if (!-e $request_filename) {
       rewrite ^(.*)$ /index.html?s=$1 last;
       break;
   }
}