nginx解决vue路由history模式刷新404问题
在nginx上部署vue项目(history模式);vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载。但是如果我们不想hash这种以#号结尾的路径时候的话,我们可以使用路由的history的模式。比如如下网址:使用hash模式的话,那么访问变成 http://localhost:8080/bank/page/count/#/
在nginx上部署vue项目(history模式);
vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载。但是如果我们不想hash这种以#号结尾的路径时候的话,我们可以使用路由的history的模式。比如如下网址:
使用hash模式的话,那么访问变成 http://localhost:8080/bank/page/count/#/ 这样的访问,如果路由使用 history的话,那么访问的路径变成 如下:
http://localhost:8080/bank/page/count 这样的了;
不过history的这种模式需要后台配置支持。比如:
当我们进行项目的主页的时候,一切正常,可以访问,但是当我们刷新页面或者直接访问路径的时候就会返回404,那是因为在history模式下,只是动态的通过js操作window.history来改变浏览器地址栏里的路径,并没有发起http请求,但是当我直接在浏览器里输入这个地址的时候,就一定要对服务器发起http请求,但是这个目标在服务器上又不存在,所以会返回404,怎么解决呢?我们现在可以把所有请求都转发到 http://localhost:8080/bank/page/index.html上就可以了。
所以我们需要使用nginx的try_files,去查找index.html.
nginx配置:
location / {
add_header Cache-Control no-store;
add_header Pragma no-cache;
add_header Expires 0;
root /home/test/;
try_files $uri $uri/ @router;
autoindex on;
}
try_files $uri $uri/ @router;
$uri 这个是nginx的变量,代表用户访问的单个文件地址。
比如:http://test.com/index.html, 那么$uri就是 /index.html。
$uri/ 这个代表用户访问的文件目录。
比如:http://test.com/index.html, 那么$uri就是 /index.html。
所以try_files $uri $uri/的意思就是,比如http://test.com/example先去查找单个文件example,如果example不存在,则去查找同名的文件目录/example/,如果再不存在,将进行重定向@router
配置示例:
location / {
root /opt/data/nginx/html/pc/;
index index.php index.html index.htm;
try_files $uri $uri/ /index.html;
error_page 404 /index.html;
}
凡是404的路由,都会被重定向到index.html,这样就显示正确了
更多推荐
所有评论(0)