部署项目正常点击一切正常，刷新后变404

解孔明2024-09-29 16:43

部署项目正常点击一切正常，刷新后变404

背景

测试环境重新部署vue项目，测试一切正常，偶然刷新了一下变404了，于是有本题。

分析

一般的简单教程上没有找到这个相关介绍，交给文心一言，提示：Nginx没有正确配置以处理单页面应用（SPA）的路由

，加上：location / { try_files $uri $uri/ /index.html; }
对所有不存在的文件或目录都返回你的index.html文件。这样，前端路由就能接管并显示正确的页面了

解决方案

修改nginx主机配置为：

NGINX 复制代码

upstream server_uuu {
    server 192.1.1.1:8080;
}
server {
    listen       80;
    server_name  localhost;
    charset utf-8;
    location / {
        root dist;
        try_files $uri $uri/ /index.html;
        index  index.html index.htm;
    }
    location /ls/uuu {
        proxy_pass http://server_uuu;
        proxy_redirect off;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

声明：本文使用八爪鱼rpa工具从gitee自动搬运本人原创（或摘录，会备注出处）博客，如版式错乱请评论私信，如情况紧急或久未回复请致邮 xkm.0jiejie0@qq.com 并备注原委；引用本人笔记的链接正常情况下均可访问，如打不开请查看该链接末尾的笔记标题（右击链接文本，点击复制链接地址，在文本编辑工具粘贴查看，也可在搜索框粘贴后直接编辑然后搜索），在本人博客手动搜索该标题即可；如遇任何问题，或有更佳方案，欢迎与我沟通！