一 、 項目

移動端

二、背景

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>