一文解决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内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！