vue router下的html5 history在iis服務(wù)器上的設(shè)置方法
首先先照搬下官網(wǎng)的介紹
當(dāng)你使用 history 模式時，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！
不過這種模式要玩好，還需要后臺配置支持。因為我們的應(yīng)用是個單頁客戶端應(yīng)用，如果后臺沒有正確的配置，當(dāng)用戶在瀏覽器直接訪問 http://oursite.com/user/id 就會返回 404，這就不好看了。
所以呢，你要在服務(wù)端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態(tài)資源，則應(yīng)該返回同一個index.html 頁面，這個頁面就是你 app 依賴的頁面。
但是官網(wǎng)上僅給了Apache服務(wù)器和Nginx服務(wù)器的配置，so。。。。。
那么下面我們開始介紹如何配置iis服務(wù)器。（我的iis為iis7.5）
1.安裝url重寫模塊，找到管理下的web平臺安裝程序，搜索url，選擇url重寫工具2.0，選擇安裝。
2.添加規(guī)則。點擊url重寫，選擇添加規(guī)則，空白規(guī)則，輸入名稱，按照下圖進行配置。
3.vue程序中添加兩條路由。
下面總結(jié)下：
url重寫設(shè)置中，將配置url選擇為與模式匹配，模式中填入*，使用選項選擇通配符；即表示所有的網(wǎng)站都通過此模式進行檢查匹配。匹配的條件是下面的條件選項，我們選擇的是不是文件，邏輯分組為全部匹配。
操作為重寫到我們的index.html（根據(jù)情況，設(shè)置為自己的單頁面應(yīng)用首頁）。以上操作是設(shè)置我們的頁面請求為先檢查有沒有此文件，沒有此文件全部重寫到我們的首頁中，從而能夠是的我們的自定義路由起作用。
然后我們在vue程序中設(shè)置/index.html路徑為我們的起始頁面，并且定義404頁面。至此完成設(shè)置。
參考閱讀：
解決vue router使用 history 模式刷新后404問題
總結(jié)
以上所述是小編給大家介紹的vue router下的html5 history在iis服務(wù)器上的設(shè)置方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
- 解決vue router使用 history 模式刷新后404問題
- 在nginx上部署vue項目(history模式)的方法
- 詳解如何去除vue項目中的#——History模式
- 詳解Vue路由History mode模式中頁面無法渲染的原因及解決
- 詳解如何將 Vue-cli 改造成支持多頁面的 history 模式
- Vue下路由History模式打包后頁面空白的解決方法
- vue router嵌套路由在history模式下刷新無法渲染頁面問題的解決方法
- Vue-router 中hash模式和history模式的區(qū)別
- vue下history模式刷新后404錯誤解決方法
- Vue利用History記錄上一頁面的數(shù)據(jù)方法實例
相關(guān)文章
Vue前端如何設(shè)置Cookie和鑒權(quán)問題詳解
這篇文章主要介紹了前端如何設(shè)置和使用Cookie,并對比了Cookie和Token在鑒權(quán)中的優(yōu)缺點,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-02-02
本文主要介紹了mini-vue渲染的簡易實現(xiàn)，主要簡單來實現(xiàn)一個虛擬dom渲染真實dom，以及更新的方法。具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了在vue3中使用import.meta.env方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
今天小編就為大家分享一篇修改vue+webpack run build的路徑方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
稍微學(xué)一下Vue的數(shù)據(jù)響應(yīng)式（Vue2及Vue3區(qū)別）
這篇文章主要介紹了稍微學(xué)一下 Vue 的數(shù)據(jù)響應(yīng)式（Vue2 及 Vue3），文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
vue.js使用Element-ui實現(xiàn)導(dǎo)航菜單
這篇文章主要為大家詳細介紹了vue.js使用Element-ui中實現(xiàn)導(dǎo)航菜單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
基于 vue-skeleton-webpack-plugin 的骨架屏實戰(zhàn)
這篇文章主要介紹了基于 vue-skeleton-webpack-plugin 的骨架屏實戰(zhàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要為大家詳細介紹了如何使用Vue實現(xiàn)簡單的信號和電池電量組件效果,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-04-04
uniapp中如何基于vue3實現(xiàn)輸入驗證碼功能
本文介紹了如何使用uniapp和vue3創(chuàng)建一個手機驗證碼輸入框組件,通過封裝VerificationCodeInput.vue組件,并在父組件中引入,可以實現(xiàn)驗證碼輸入功能,適合需要增加手機驗證碼驗證功能的開發(fā)者參考使用2024-09-09
這篇文章主要介紹了vue cli構(gòu)建的項目中請求代理與項目打包問題,需要的朋友可以參考下2018-02-02