nginx

关注公众号 jb51net

关闭
首页 > 网站技巧 > 服务器 > nginx > Nginx部署Vue刷新页面404

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

作者:lskblog

当使用Nginx部署Vue项目(或其他前端SPA应用)时,直接访问首页可以正常显示,但刷新非首页路由或直接访问子路由时,会出现404错误,所以本文给大家介绍了Nginx部署Vue项目刷新页面404问题的解决方法,需要的朋友可以参考下

问题描述

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

问题原因

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

解决方案

方案一:修改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会依次尝试查找:

验证配置

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

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

其他注意事项

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

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

您可能感兴趣的文章:
阅读全文