宝塔nginx部署前端页面刷新报404

宝塔nginx部署前端页面刷新报404

问题

当使用nginx 部署vue项目的时候 当我们刷新页面的时候，或者访问路由配置页面的时候会直接404。

这是因为通常我们做的vue项目属于单页面开发。所以只有index.html。解决这个bug也很简单。只需要将访问重定向到index.html这个页面，交由 index.html 去处理对应的路由跳转就好。

解决方案

修改nginx配置

server {
    listen   80; # 监听的端口 
    server_name  xx.xx.xxx.xx; # 处理的host地址 （请替换成你对应的项目访问 ip 或 域名）!!!
    root    /usr/share/nginx/html; # vue项目存在的目录（替换成你对应的地址，如果你这是用docker部署的请改成你容器内的地址）
    
    # 下面两个配置是关键所在！！！！！！
    location / {
        try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
        index  index.html index.htm;
    }
    #对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
    #因此需要rewrite到index.html中，然后交给路由在处理请求资源
    location @router {
        rewrite ^.*$ /index.html last;
    }
}

参考文章：

• https://blog.csdn.net/u010457326/article/details/128246426
• https://blog.csdn.net/qq_43059674/article/details/110296807#:~:text=当使用nginx 部署vue项目的时候 当我们刷新页面的时候，或者访问路由配置页面的时候会直接404，这是因为通常我们做的vue项目属于单页面开发。 所以只有 index.html 。 解决这个bug也很简单。 只需要将访问重定向到,今天小编就为大家分享一篇 解决vue 项目 nginx部署 到非根目录下 刷新 空白的问题，具有很好的参考价值，希望对大家有所帮助。 一起跟随小编过来看看吧