Vue/React项目刷新页面出现404的原因以及解决办法

2024-06-06 渥太华微生活

0_QOZm9X5er1Y0r5-t.jpg


背景

问题描述:

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:配置服务器,将任意页面都重定向到 index.html,把路由交给前端代码去处理

产生问题的本质是因为我们的路由是通过JS来执行视图切换的,当我们进入到子路由时刷新页面,web容器没有相对应的页面此时会出现404,所以我们只需要配置服务器,将任意页面都重定向到 index.html,把路由交给前端代码去处理(即先进入到index.html,再通过js对url进行路由分发和页面渲染)。

1)如果使用的是nginx服务器,则只需要使用 try_files 指令:

server {
  ...
  location / {
      try_files $uri /index.html
  }
}

2)如果使用Apache服务器,则需要在项目根目录创建 .htaccess 文件,文件包含如下内容:

RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

方法3:对于Laravel应用,修改路由文件,将任意页面都重定向到 index.html

routes\web.php

<?php

use Illuminate\Support\Facades\Route;

Route::get('{any}', function () {
    return view('index');
})->where('any', '.*');
二维码 | 渥太华微生活

编者注:新闻取自各大新闻媒体,新闻内容并不代表本网立场!文字和图片来自网络,版权归原作者所有。如有侵权,请速联系小编,立即删除。

40
全部评论 (0)
展开快速发表评论

科技专栏

缩略图 | axios 介绍和使用

axios 介绍和使用

2024-06-04 59