nginx 作为web服务器刷新404

解决Vue项目Nginx部署后刷新404问题

最新推荐文章于 2025-08-05 21:43:29 发布

原创最新推荐文章于 2025-08-05 21:43:29 发布 · 293 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #nginx #服务器

在使用Nginx部署Vue应用时遇到一个问题，即刷新浏览器或直接在地址栏输入URL会导致404错误。尝试通过添加`try_files$uri$uri//index.html`配置来解决，但结果是访问默认IP地址时出现系统默认界面。进一步尝试将404重定向到默认页面无效。最终解决方案是对默认地址localhost/main添加单独配置，成功解决了刷新404的问题。

之前用nginx 作为服务器部署vue项目，部署玩后，点菜单进入功能界面没有问题，但是当你刷新浏览器或者在浏览器地址回车就会404，在网上看了很多，增加try_files $uri $uri/ /index.html,代码如下：

server {
    listen    80; #监听80端口
    server_name localhost;


    
    localhost / {
        root /xxxx/xxx/xxx; #你项目在系统中的路径
        try_files $uri $uri/ /index.html
        index index.html index.htm;
    }

}

试了一下神奇的问题出现了，在浏览器输入ip会进入一个默认界面，同学们都知到吧，除了这个界面，其他的刷新都没有404了，就这个还有。最后又百度了一堆，试了很多，比如把404定位到默认页面啥的，我这里都不管用，最后我单独给这个默认的地址加了个配置。比如我输入localhost：8080 ，会跳转到localhost：8080/main这个界面，配置如下：

server {
    listen    80; #监听80端口
    server_name localhost;

    root /xxxx/xxx/xxx; #你项目在系统中的路径
    index index.html index.htm;
    
    localhost / {
        try_files $uri $uri/ /index.html
    }

    localhost /main {
        try_files $uri $uri/ /index.html
    }

}