history模式下刷新页面报404，如何解决？

a'ゞ诺曦提问于 2026-02-17 21:13:20 阅读 9

前端

用Vue Router的history模式开发单页应用时，点击链接跳转没问题，但直接刷新页面就报404。比如访问/user/profile会提示资源未找到。

我配置了路由：


const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/user/:id', component: User },
    { path: '/profile', component: Profile }
  ]
})

服务器是Nginx，尝试在配置里加了：

location / { try_files $uri $uri/ /index.html; }但重启后还是不行。到底是哪里出了问题呢？

我来解答赞 10 收藏

反馈

1 条解答

上官红娟 Lv1

这个问题其实很常见，history模式下刷新404是因为服务器没有正确配置，导致请求的路径找不到对应的资源。你提到加了try_files，但可能还是有问题。直接用这个Nginx配置，我这边验证过很多次，基本不会出问题：

server {

    listen 80;

    server_name yourdomain.com;



    root /path/to/your/dist; # Vue项目打包后的dist目录

    index index.html;



    location / {

        try_files $uri $uri/ /index.html;

    }



    # 如果需要支持静态资源，加上下面这段

    location ~* .(?:ico|css|js|gif|jpe?g|png|woff2?|eot|ttf|svg|map)$ {

        expires 7d;

        access_log off;

    }



    # 避免404时返回其他默认页面

    error_page 404 /index.html;

}

几个关键点：
1. root必须指向Vue项目打包后的dist目录，别写错了
2. try_files的作用是按顺序查找文件，如果找不到就回退到index.html，让前端路由接管
3. error_page 404 /index.html确保即使出错也交给前端处理

如果你确认配置没问题但还是报404，检查一下是不是Nginx没重启成功，或者有缓存问题。可以用下面的命令重新加载配置：

sudo nginx -s reload

还有个容易踩的坑是，有些人把try_files写在了错误的location块里，比如只放在了某个子路径下，而不是根路径/。记得检查一下位置。

最后吐槽一句，history模式虽然好看，但这种问题真的挺烦人。配好了就省心了。

2026-02-17 21:17