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>
相关推荐
Electrolux22 分钟前
【使用教程】一个前端写的自动化rpa工具
前端·javascript·程序员
xd0000223 分钟前
2.从0开始搭建vue项目(node.js,vue3,Ts,ES6)
vue.js·node.js
赵大仁1 小时前
深入理解 Pinia:Vue 状态管理的革新与实践
前端·javascript·vue.js
小小小小宇1 小时前
业务项目中使用自定义Webpack 插件
前端
小小小小宇2 小时前
前端AST 节点类型
前端
小小小小宇2 小时前
业务项目中使用自定义eslint插件
前端
babicu1232 小时前
CSS Day07
java·前端·css
小小小小宇3 小时前
业务项目使用自定义babel插件
前端
前端码虫3 小时前
JS分支和循环
开发语言·前端·javascript
GISer_Jing3 小时前
MonitorSDK_性能监控(从Web Vital性能指标、PerformanceObserver API和具体代码实现)
开发语言·前端·javascript