nginx部署vue项目，刷新后404

最新推荐文章于 2025-10-09 18:02:36 发布

原创最新推荐文章于 2025-10-09 18:02:36 发布 · 401 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

文章介绍了如何通过在Nginx的location中添加try_files指令来处理Vue项目的路由，确保在刷新页面时能正确找到index.html，避免出现404错误。配置包括$uri$uri//index.html的文件查找规则以及针对/api/路径的代理设置。

在location中增加try_files配置：

try_files $uri $uri/ /index.html;

try_files指令 设置了 文件查找规则 为 $uri $uri/ /index.html。即3个规则，先从 $uri 查找，再从 $uri/ 目录中查找，最后查找 /index.html

完整配置文件：

server {
        listen       9999;
        server_name  localhost;

        location / {
            root   dist;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html; #解决vue项目刷新404问题
        }

        location ~ /api/ {
            proxy_pass  http://xxx.xx.xx.xx:xxxx;
        }
}