脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网站技巧 → 服务器 → nginx → Nginx部署Vue刷新页面404

一文解决Nginx部署Vue项目刷新页面404问题

 更新时间：2025年10月13日 10:53:35   作者：lskblog  
当使用Nginx部署Vue项目（或其他前端SPA应用）时,直接访问首页可以正常显示,但刷新非首页路由或直接访问子路由时,会出现404错误,所以本文给大家介绍了Nginx部署Vue项目刷新页面404问题的解决方法,需要的朋友可以参考下

问题描述

当使用Nginx部署Vue项目（或其他前端SPA应用）时，直接访问首页可以正常显示，但刷新非首页路由或直接访问子路由时，会出现404错误。

问题原因

这是因为Vue作为单页应用(SPA)，其路由是由前端JavaScript控制的。当你在浏览器中直接访问一个子路由（如/about）时：

  • 浏览器会向服务器请求/about这个路径
  • Nginx会尝试在服务器上查找/about这个文件或目录
  • 由于Vue是SPA，实际上只有index.html一个入口文件，所以Nginx找不到/about资源，返回404

解决方案

方案一：修改Nginx配置（推荐）

在Nginx配置中添加try_files指令，将所有请求重定向到index.html：

server {
    listen       80;
    server_name  yourdomain.com;
    root         /path/to/your/vue/dist;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

或者更完整的配置示例：

server {
    listen       80;
    server_name  yourdomain.com;
    root         /path/to/your/vue/dist;
    index        index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    # 静态资源缓存配置
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires max;
        log_not_found off;
    }

    # 防止直接访问index.html
    location = /index.html {
        internal;
    }
}

方案二：使用Vue Router的history模式

确保你的Vue Router配置为history模式：

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

方案三：使用hash模式（不推荐）

如果你不想修改服务器配置，可以将路由模式改为hash模式：

const router = new VueRouter({
  mode: 'hash',
  routes: [...]
})

这样URL会变成类似http://example.com/#/about的形式，刷新不会出现问题，但URL不够美观。

配置说明

try_files $uri $uri/ /index.html：Nginx会依次尝试查找：

  • 精确匹配的文件（$uri）
  • 匹配的目录（$uri/）
  • 如果都找不到，则返回index.html，由前端路由处理

验证配置

修改配置后，执行以下命令验证并重载Nginx：

sudo nginx -t  # 测试配置是否正确
sudo nginx -s reload  # 重载配置

其他注意事项

  • Base URL：如果你的项目不是部署在根路径下，需要设置Vue Router的base选项和Nginx的location匹配
  • 静态资源：确保静态资源路径正确，可能需要配置publicPath
  • 后端API：如果有后端API，需要配置Nginx代理

通过以上配置，你的Vue项目应该可以在Nginx上正常运行，并且刷新页面也不会出现404错误了。

到此这篇关于一文解决Nginx部署Vue项目刷新页面404问题的文章就介绍到这了,更多相关Nginx部署Vue刷新页面404内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • CentOS 7.0下nginx实现每天定时分割日志

    CentOS 7.0下nginx实现每天定时分割日志

    大家都知道Nginx产生的日志都是存在一个文件，随着网站运行时间越长，日志文件的大小也在不断增长，所以这个时候就需要实现定时分割，这篇文章主要介绍了在CentOS 7.0下nginx实现每天定时分割日志的相关资料，需要的朋友可以参考下。
    2017-04-04
  • Nginx单IP地址配置多个SSL证书的方法示例

    Nginx单IP地址配置多个SSL证书的方法示例

    这篇文章主要介绍了Nginx单IP地址配置多个SSL证书的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • 阿里云部署Ubuntu 1.4 Flask + WSGI + Nginx 详解

    阿里云部署Ubuntu 1.4 Flask + WSGI + Nginx 详解

    本文解决的是 Flask 最后一公里的问题：Linux 部署,需要的朋友可以参考下
    2017-12-12
  • Nginx反向代理转发tomcat的实现

    Nginx反向代理转发tomcat的实现

    本文主要介绍了Nginx反向代理转发tomcat的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • 详解Nginx服务器和iOS的HTTPS安全通信

    详解Nginx服务器和iOS的HTTPS安全通信

    这篇文章主要介绍了详解Nginx服务器和iOS的HTTPS安全通信的相关资料,需要的朋友可以参考下
    2017-06-06
  • nginx basic认证的实现示例

    nginx basic认证的实现示例

    auth_basic作为一个认证模块,在apache和nginx中都很常用,本文主要介绍了nginx basic认证的实现示例,具有一定的参考价值,感兴趣的可以了解一下
    2024-08-08
  • nginx+goreplay实现业务流量压测的示例代码

    nginx+goreplay实现业务流量压测的示例代码

    通过Nginx和GoReplay的组合,可以实现生产环境流量的实时拷贝和回放,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2025-07-07
  • nginx 配置虚拟主机,实现在一个服务器可以访问多个网站的方法

    nginx 配置虚拟主机,实现在一个服务器可以访问多个网站的方法

    下面小编就为大家分享一篇nginx 配置虚拟主机,实现在一个服务器可以访问多个网站的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12
  • Nginx对网段内ip的连接数限流配置详解

    Nginx对网段内ip的连接数限流配置详解

    这篇文章主要介绍了Nginx对网段内ip的连接数限流配置详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • Nginx+cpolar实现内网穿透多个Windows Web站点端口的步骤详解

    Nginx+cpolar实现内网穿透多个Windows Web站点端口的步骤详解

    这篇文章主要给大家介绍了Nginx+cpolar实现内网穿透多个Windows Web站点端口的详细步骤,文章通过图文介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2023-10-10

最新评论