当vue-router使用history模式时,当我们刷新页面或直接访问路径的时候就会返回404,如图。
在history模式下,只是动态的通过js操作window.history来改变浏览器地址栏里的路径,并没有发起http请求,但是当我们直接在浏览器输入这个地址的时候,就会对服务器发起http请求,但是这个目标在服务器上又不存在,所以会返回404。
我们可以通过把所有请求都转发到首页上来解决这个问题。
nginx配置:
location /{
root /website/wenfu_zszk/;
index index.html;
#解决404
try_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。