一 、 项目

移动端

二、背景

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配置文档

<?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>