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即可。

Logo

前往低代码交流专区

更多推荐