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