Nginx：vue路由使用history模式刷新404

当vue-router使用history模式时，当我们刷新页面或直接访问路径的时候就会返回404，如图。

在history模式下，只是动态的通过js操作window.history来改变浏览器地址栏里的路径，并没有发起http请求，但是当我们直接在浏览器输入这个地址的时候，就会对服务器发起http请求，但是这个目标在服务器上又不存在，所以会返回404。

我们可以通过把所有请求都转发到首页上来解决这个问题。

nginx配置：

location /{root  /website/wenfu_zszk/;index index.html;#解决404try_files $uri $uri/ /index.html;}
 

解释：

try_files：按选项所指定的顺序去检查用户请求的文件是否存在，如果本地存在的话则返回该请求；不存在的话将该请求转发到指定的其它路径。

$uri：这个变量指当前的请求URI，不包括任何参数(见$args)。

所以try_files $uri $uri/ /index.html表示查找当前请求地址对应的文件是否存在，不存在则查找请求地址对应的目录是否存在，还是不存在则重定向到/index.html页面。如：

http://test.com/test就会先查找test文件是否存在，如果test文件不存在，则去查找目录同名目录/test/是否村存在，如果还是不存在，就重定向到/index.html。