美文网首页
Nginx部署vue项目,刷新后找不到界面

Nginx部署vue项目,刷新后找不到界面

作者: 张中华 | 来源:发表于2022-04-27 10:46 被阅读0次

    解决方案:
    修改配置文件:

    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/qq_43059674/article/details/110296807

    相关文章

      网友评论

          本文标题:Nginx部署vue项目,刷新后找不到界面

          本文链接:https://www.haomeiwen.com/subject/zfehyrtx.html