宝塔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也很简单。 只需要将访问重定向到 ,%E4%BB%8A%E5%A4%A9%E5%B0%8F%E7%BC%96%E5%B0%B1%E4%B8%BA%E5%A4%A7%E5%AE%B6%E5%88%86%E4%BA%AB%E4%B8%80%E7%AF%87%20%E8%A7%A3%E5%86%B3vue%20%E9%A1%B9%E7%9B%AE%20nginx%E9%83%A8%E7%BD%B2%20%E5%88%B0%E9%9D%9E%E6%A0%B9%E7%9B%AE%E5%BD%95%E4%B8%8B%20%E5%88%B7%E6%96%B0%20%E7%A9%BA%E7%99%BD%E7%9A%84%E9%97%AE%E9%A2%98%EF%BC%8C%E5%85%B7%E6%9C%89%E5%BE%88%E5%A5%BD%E7%9A%84%E5%8F%82%E8%80%83%E4%BB%B7%E5%80%BC%EF%BC%8C%E5%B8%8C%E6%9C%9B%E5%AF%B9%E5%A4%A7%E5%AE%B6%E6%9C%89%E6%89%80%E5%B8%AE%E5%8A%A9%E3%80%82%20%E4%B8%80%E8%B5%B7%E8%B7%9F%E9%9A%8F%E5%B0%8F%E7%BC%96%E8%BF%87%E6%9D%A5%E7%9C%8B%E7%9C%8B%E5%90%A7