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>
相关推荐
csj5010 分钟前
前端基础之《React(4)—webpack简介-编译打包优化》
前端·react
万少24 分钟前
Trae AI 编辑器6大使用规则
前端·javascript·人工智能
好玩的Matlab(NCEPU)1 小时前
如何编写 Chrome 插件(Chrome Extension)
前端·chrome
Yan-英杰1 小时前
Deepseek大模型结合Chrome搜索爬取2025AI投资趋势数据
前端·chrome
Crystal3281 小时前
app里video层级最高导致全屏视频上的操作的东西显示不出来的问题
前端·vue.js
weixin_445476681 小时前
Vue+redis全局添加水印解决方案
前端·vue.js·redis
lecepin1 小时前
AI Coding 资讯 2025-10-29
前端·后端·面试
余道各努力,千里自同风1 小时前
小程序中获取元素节点
前端·小程序
PineappleCoder2 小时前
大模型也栽跟头的 Promise 题!来挑战一下?
前端·面试·promise
非凡ghost2 小时前
MousePlus(鼠标增强工具) 中文绿色版
前端·windows·计算机外设·软件需求