一 、 项目
移动端
二、背景
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>