vue/react项目刷新页面出现404报错的原因及解决办法

Vue项目打包部署到线上后,刷新页面会提示404,下面这篇文章主要给大家介绍了关于vue/react项目刷新页面出现404报错的原因及解决办法,文中将解决的办法介绍的很详细,需要的朋友可以参考下

​​​​​​​

• 背景
• 解决办法
  • 法1：将vue/react路由模式由history路由改为hash路由
  • 法2：在服务器nginx配置文件里，添加如下代码，再重启nginx，刷新网页就OK了
• 文章参考
• 总结

  背景

  问题描述：vue/react项目，正常的页面操作跳转，不会出现404的问题，但是一旦刷新，就会出现404报错。

  产生原因：我们打开vue/react打包后生成的dist文件夹，可以看到只有一个 index.html 文件及一些静态资源，这个是因为vue/react是单页应用(SPA)，只有一个index.html作为入口文件，其它的路由都是通过JS来进行跳转的。
  而网页上显示的是静态资源的绝对路径，虽然浏览器上的url变化了，但实际上服务器的静态资源是没有更改路径的，始终只有index.html这一个入口，所以刷新就会导致url上的路径和服务器上的资源不匹配，无法找到静态资源，从而报错404。（多页应用因为有多个入口文件，所以不会有这样的问题）。

  接下来我们看看服务器上的nginx配置：

• server {
    // 监听80端口
    listen 80;
    // 定义你的站点名称
    server_name website.com;
    // 根据请求 URI 设置配置
    location / {
        // 站点根目录，这里为 vue 构建出来的 dist 目录
        root   /www/dist;
        // 站点初始页为index.html 或 index.htm
        index  index.html index.htm;
    }
  }

  根据nginx配置我们可以得出，当我们在地址栏输入域名（如www.xxx.com）时，这时会打开我们 dist 目录下的 index.html 文件，然后我们再通过页面操作跳转路由进入到 www.xxx.com/login，关键在这里，当我们在 www.xxx.com/login 页执行刷新操作，nginx location 是没有相关配置的，所以就会出现 404 的情况。

• 解决办法

  法1：将vue/react路由模式由history路由改为hash路由

  为什么hash模式下没有问题：

  hash路由的原理是onhashchange事件，hash模式下，仅hash符号之前的内容会被包含在http请求中，如www.xxx.com/#/login，hash的值为 #/login，hash值#/login虽然出现在 url中，但不会被包括在http请求中，其只会请求www.xxx.com，对服务端完全没有影响，因此改变hash不会重新加载页面，即使服务器nginx没有配置location，也不会返回404错误。

  history模式：原理是利用了h5的Interface 中的pushState()方法和replaceState()方法，它们提供了对浏览器历史记录进行修改的功能，但当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向服务器发送请求，因此history模式正常页面操作跳转路由，是不会再次发送http资源请求的。但是当刷新的时候，由于url已经改变，如www.xxx.com/login会完整地向服务器请求相关资源，所以就会造成对应路径的资源找不到，从而返回404。

  但是使用hash路由，url上会携带#号标志，且history模式的同步更新浏览器历史记录功能就没有了。

• 法2：在服务器nginx配置文件里，添加如下代码，再重启nginx，刷新网页就OK了

• location / {
   try_files $uri $uri/ @rewrites;
   index index.html;
  }
  location @rewrites {
    rewrite ^.*$ /index.html last;
  }