vue项目history路由，F5刷新页面，页面404问题，nginx try_files解决方案

解忧杂货铺Q

已于 2022-05-16 11:52:00 修改

阅读量5.3k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：大前端文章标签： vue nginx

于 2020-12-28 19:49:28 首次发布

本文链接：https://blog.csdn.net/qq_26003101/article/details/111873243

大前端专栏收录该内容

54 篇文章

订阅专栏

博客指出vue项目刷新出现404的原因，在于服务器请求的是真实地址，而vue项目路由依赖于SPA单页应用的index.html，并非真实文件目录地址。解决办法是将404的路由重定向到index.html，从而正确显示页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有关history路由原理以及为什么刷新会404请查看往期文章

这里不再赘述为什么404的原因。

其实如果这么理解，可能会更加容易些。服务器会请求你所填写的真实地址，比如/about-us/where-to-go，会依次查找文件地址about-us、where-to-go，但是vue项目和普通项目不同，这只是路由，并不是真的文件目录地址，所有的路由都是依赖于SPA单页应用的index.html。所以当刷新时，找不到对应产生404。

所以我们需要使用nginx的try_files，去查找index.html.

nginx server配置

server {
  listen 9002;
  server_name localhost;

  gzip on;
  gzip_static on;
  gzip_proxied any;
  gzip_types
      text/css
      text/javascript
      text/xml
      text/plain
      image/x-icon
      application/javascript
      application/x-javascript
      application/json;

  location / {
    add_header Cache-Control no-store;
    add_header Pragma no-cache;
    add_header Expires 0;
    root /home/test/;
    try_files $uri $uri/ @router;
    autoindex on;
  }
 location @router {
      rewrite ^.*$ /index.html last;
 }
  location ~ ^/(images) {
    add_header Cache-Control no-store;
    proxy_pass http://localhost:8990;
  }
}

try_files $uri $uri/ @router;

$uri 这个是nginx的变量，代表用户访问的单个文件地址。
比如：http://test.com/index.html, 那么$uri就是 /index.html。

$uri/ 这个代表用户访问的文件目录。
比如：http://test.com/index.html, 那么$uri就是 /index.html。

所以try_files $uri $uri/的意思就是，比如http://test.com/example先去查找单个文件example，如果example不存在，则去查找同名的文件目录/example/，如果再不存在，将进行重定向@router

rewrite     [regex]          [replacement]      [flag];
            url正则表达式     替换成真实url       标记（last,break）
            
location @router {
    rewrite ^.*$ /index.html last;
    # 匹配所有	/index.html last;
}

凡是404的路由，都会被重定向到index.html，这样就显示正确了