nginx部署vue项目，刷新后404

wp3524

于 2023-04-12 11:01:39 发布

阅读量380

点赞数

CC 4.0 BY-SA版权

文章标签： vue

本文链接：https://blog.youkuaiyun.com/wp3524/article/details/130101687

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在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;
        }
}