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站點設置虛擬目錄的方式可解決該問題，可是這方式路由比較多的時候比較麻煩。
  

• 方案二

  一、下載Web平臺安裝程序（https://www.microsoft.com/web/downloads/）
  二、若是已經安裝過Web平臺安裝程序，能夠在IIS站點看到該程序
  
  三、查找Url重寫工具2.0並進行安裝
  
  四、安裝完畢後，從新打開IIS控制檯，進入相應站點，就能夠看到URL重寫該功能模塊
  
  五、添加規則，並選擇入站規則-空白規則
  
  

總結

Url重寫設置
匹配的URL：請求的URL選擇與模式匹配，模式中填寫*，使用選項選擇通配符;即表示全部的網站都經過此模式進行檢查匹配。
條件：是下面的條件選項，咱們選擇不是文件，邏輯分組爲所有匹配。
操做：重寫到index.html（根據狀況，設置爲本身的單頁面應用首頁）。

以上操做是設置咱們的頁面請求爲先檢查有沒有該文件，沒有該文件所有重寫到首頁，從而可以使用自定義路由。而後在vue程序中設置/index.html路徑爲起始頁，而且定義404頁面。