react/vue项目刷新页面404的原因以及解决办法

项目

公司官网

背景

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

2、产生原因:我们打开react/vue打包后生成的dist文件夹,可以看到只有一个 index.html 文件及一些静态资源,这个是因为react/vue是单页应用(SPA),只有一个index.html作为入口文件,其它的路由都是通过JS来进行跳转的。

而网页上显示的是静态资源的绝对路径,虽然浏览器上的url变化了,但实际上服务器的静态资源没有更改路径的,始终只有index.html这一个入口,所以刷新就会导致url上的路径和服务器上的资源不匹配,无法找到静态资源,从而报错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,将任意页面都重定向到 index.html,把路由交给前端代码去处理

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

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

javascript 复制代码
location / {
 try_files $uri $uri/ @router; //截取404的uri,传给 @router
 index index.html;
}
 
location @rewrites {
  rewrite ^.*$ /index.html last; //接到截取的uri 并按一定规则重写uri和vue路由跳转
}

语法介绍

javascript 复制代码
# 1.假设请求 127.0.0.1/home
 
# 2.nginx配置的location
location / {
    root   /opt/dist;
    index  index.html;
    try_files $uri $uri/ /index.html;
    }
 
 
# 变量解释
try_files  固定语法
$uri       指代home文件(ip地址后面的路径,假如是127.0.0.1/index/a.png,那就指代index/a.png)
$uri/      指代home文件夹
/index.html  向ip/index.html 地址发起请求
 
 
try_files $uri $uri/ /index.html;
尝试解析下列2个文件/文件夹(自动分辨出,IP后面的路径是文件还是文件夹), $uri/$uri/,
如果解析到,返回第一个,
`如果都没有解析到`,向`127.0.0.1/index.html发起请求跳转`(该路由必须真实,不然会报错)




相关推荐
杯莫停丶13 分钟前
Web Worker在uniapp鸿蒙APP中的深度应用
前端·uni-app
小小小小宇14 分钟前
重新探讨React Diff算法
前端
excel22 分钟前
webpack 模块图 第 五 节
前端
好_快28 分钟前
Lodash源码阅读-baseIndexOfWith
前端·javascript·源码阅读
好_快29 分钟前
Lodash源码阅读-basePullAll
前端·javascript·源码阅读
excel32 分钟前
webpack 模块图 第 四 节
前端
好_快34 分钟前
Lodash源码阅读-baseUnary
前端·javascript·源码阅读
好_快34 分钟前
Lodash源码阅读-pullAll
前端·javascript·源码阅读
洛小豆35 分钟前
Vue Router 中的 Hash 模式与 History 模式
前端·javascript·vue.js
珹洺1 小时前
JSP技术入门指南【一】利用IDEA从零开始搭建你的第一个JSP系统
java·开发语言·前端·html·intellij-idea·jsp