vue vue-router 生產的html5 history 在iis服務器上的部署設置

介紹

首先先照搬下官網的介紹
當你使用 history 模式時,URL 就像正常的 url,例如 http://yoursite.com/user/id,也好看!
不過這種模式要玩好,還需要後臺配置支持。因爲我們的應用是個單頁客戶端應用,如果後臺沒有正確的配置,當用戶在瀏覽器直接訪問http://oursite.com/user/id就會返回 404,這就不好看了。
所以呢,你要在服務端增加一個覆蓋所有情況的候選資源:如果 URL 匹配不到任何靜態資源,則應該返回同一個index.html 頁面,這個頁面就是你 app 依賴的頁面。
但是官網上僅給了Apache服務器和Nginx服務器的配置,so。。。。。
那麼下面我們開始介紹如何配置iis服務器。(我的iis爲iis7.5)

參考文獻:vue.js官網

安裝url重寫模塊,找到管理下的web平臺安裝程序,搜索url,選擇url重寫工具2.0,選擇安裝。

web安裝平臺
url重寫工具

添加規則。點擊url重寫,選擇添加規則,空白規則,輸入名稱,按照下圖進行配置。

url重寫
添加規則
在這裏插入圖片描述
注意:iis版本不同,重寫規則的方法細節可能不同,不過大同小異,在實際情況中可能會遇見URL重寫工具安裝不上的情況,實在不行只能使用hash路由頁面了。

轉至目錄

vue程序中添加兩條路由。

{path:"./index.html",component:"XXX"}, //你的啓動路由頁面
{path:*,component:"XXX"}  //你的404頁面

總結

url重寫設置中,將配置url選擇爲與模式匹配,模式中填入*,使用選項選擇通配符;即表示所有的網站都通過此模式進行檢查匹配。匹配的條件是下面的條件選項,我們選擇的是不是文件,邏輯分組爲全部匹配。
操作爲重寫到我們的index.html(根據情況,設置爲自己的單頁面應用首頁)。
    以上操作是設置我們的頁面請求爲先檢查有沒有此文件,沒有此文件全部重寫到我們的首頁中,從而能夠是的我們的自定義路由起用。
    然後我們在vue程序中設置/index.html路徑爲我們的起始頁面,並且定義404頁面。至此完成設置。
轉至目錄

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章