Nginx部署vue项目（单页面应用）刷新出现404

    Vue项目打包之后，静态文件部署到nginx之后，我们访问项目一些子页面的时候，刷新会报404，这是因为刷新页面时访问的资源在服务端找不到，因为vue-router设置的路径不是真实存在的路径。

    针对这种问题，我们只需在nginx配置文件中加一些简单配置就可以，配置如下：

server {
        listen  80;
        server_name  localhost; 
        index index.html index.htm index.php;
        root   /html/dist;    #你打包项目存放的位置
        location / {
                try_files $uri $uri/ @router; #检测文件存在性重定向到首页目录    防止404
                index  index.html;
        }
        location @router {
                rewrite ^.*$ /index.html last;
        }
    }

    最近在使用过程中又遇到了一些问题，使用上面的配置会报如下错误：

2020/09/22 15:08:26 [error] 8740#3308: *1 rewrite or internal redirection cycle while redirect to named location "@router", 

    只需要将上面location @router中的last改为break即可。