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

一 、 项目

移动端

二、背景

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

2、产生原因:

React Router是客户端的路由,当再次刷新时,IIS无法定位,因此抛出404错误。

为了移动端链接美观使用了history路由。

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

而网页上显示的是静态资源的绝对路径,虽然浏览器上的url变化了,但实际上服务器的静态资源没有更改路径的,始终只有index.html这一个入口,所以刷新就会导致url上的路径和服务器上的资源不匹配,无法找到静态资源,从而报错404。(多页应用因为有多个入口文件,所以不会有这样的问题)

三、解决办法

1、将vue/react路由模式为history路由改为hash路由
方法链接-路由-nginx

2、使用的是IIS配置项目

需要服务器安装了重定向组件

配置站点下的web.config文件

以下基础代码,具体详情配置查看web.config配置文档

javascript 复制代码
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="重写规则">
                    <conditions>
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="/index.html" appendQueryString="false" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>
相关推荐
duanyuehuan24 分钟前
Vue 组件定义方式的区别
前端·javascript·vue.js
veminhe28 分钟前
HTML5简介
前端·html·html5
洪洪呀29 分钟前
css上下滚动文字
前端·css
搏博1 小时前
基于Vue.js的图书管理系统前端界面设计
前端·javascript·vue.js·前端框架·数据可视化
掘金安东尼2 小时前
前端周刊第419期(2025年6月16日–6月22日)
前端·javascript·面试
bemyrunningdog2 小时前
AntDesignPro前后端权限按钮系统实现
前端
重阳微噪2 小时前
Data Config Admin - 优雅的管理配置文件
前端
Hilaku2 小时前
20MB 的字体文件太大了,我们把 Icon Font 压成了 10KB
前端·javascript·css
fs哆哆2 小时前
在VB.net中,文本插入的几个自定义函数
服务器·前端·javascript·html·.net
专注VB编程开发20年2 小时前
C# .NET多线程异步记录日声,队列LOG
java·开发语言·前端·数据库·c#