Vue H5 History 部署IIS上404問題

背景簡介

vue

使用

vue-router

時，預設的位址并不美觀，以

#

進行分割，例如：

http://www.xxx.com/#/main

。

為了通路位址能像正常的

url

一樣，例如：

http://www.xxx.com/user/id

按照官網介紹，使用 history 模式。但是卻産生了問題。

問題

因為我們的應用是單頁用戶端應用，當使用者在浏覽器直接通路

http://www.xxx.com/user/id

時，重新整理頁面的時候，會傳回404錯誤。

問題原因

服務端URL比對不到相應的路由資源

解決方案

官網提供的解決方案隻支援Apache伺服器以及Nginx伺服器配置，然而IIS的解決方案并沒有給出

• 方案一

可通過給IIS站點設定虛拟目錄的方式可解決該問題，但是這方式路由比較多的時候比較麻煩。

• 方案二

1、下載下傳Web平台安裝程式（https://www.microsoft.com/web/downloads/）

2、如果已經安裝過Web平台安裝程式，可以在IIS站點看到該程式

3、查找

Url重寫工具2.0

并進行安裝

4、安裝完畢後，重新打開IIS控制台，進入相應站點，就可以看到

URL重寫

該功能子產品

5、添加規則，并選擇

入站規則-空白規則

總結

Url重寫設定

比對的URL：請求的URL選擇

與模式比對

，模式中填寫

*

，使用選項選擇

通配符

;即表示所有的網站都通過此模式進行檢查比對。

條件：是下面的條件選項，我們選擇

不是檔案

，邏輯分組為全部比對。

操作：重寫到

index.html

（根據情況，設定為自己的單頁面應用首頁）。

以上操作是設定我們的頁面請求為先檢查有沒有該檔案，沒有該檔案全部重寫到首頁，進而能夠使用自定義路由。然後在vue程式中設定

/index.html

路徑為起始頁，并且定義404頁面。