vue組件historyApiFallback作用詳解
本篇博客主要是詳細(xì)總結(jié)一下vue中的historyApiFallback的作用。
當(dāng)我們在瀏覽器中輸入一個(gè)網(wǎng)址(比如說是：http://www.edit.com),此時(shí)會經(jīng)過dns解析，拿到ip地址然后根據(jù)ip地址向該服務(wù)器發(fā)起請求，服務(wù)器接受到請求之后，然后返回相應(yīng)的結(jié)果(html,css,js)。
如果我們在前端設(shè)置了重定向，此時(shí)頁面會進(jìn)行跳轉(zhuǎn)到http://www.edit.com/home,在前端會進(jìn)行匹配對應(yīng)的組件然后將其渲染到頁面上。此時(shí)如果我們刷新頁面的話，瀏覽器會發(fā)送新的請求http://www.edit.com/home,如果后端服務(wù)器沒有/home對應(yīng)的接口，此時(shí)會返回404，但是一般我們配置nginx進(jìn)行代理，此時(shí)在Nginx中進(jìn)行相關(guān)配置，就可以解決該問題。
如下圖所示為nginx中進(jìn)行配置。
該配置的意思就是請求路徑對應(yīng)的接口時(shí)，此時(shí)就返回首頁數(shù)據(jù)，此時(shí)當(dāng)前端拿到該數(shù)據(jù)時(shí)，此時(shí)根據(jù)前端路由來匹配相應(yīng)的組件即可。
本地服務(wù)器
如果我們在本地開啟服務(wù)器，此時(shí)當(dāng)我們進(jìn)行刷新時(shí)，瀏覽器會拿著該地址localhost:8000/home向本地服務(wù)器發(fā)起請求，但是本地不存在/home的文件夾，所以會返回404。如下圖所示。
但我們刷新時(shí)，不會出現(xiàn)錯(cuò)誤，原因是vue-cli中默認(rèn)在webpack中幫我們配置好了
如果我們將其改為false,此時(shí)就會出錯(cuò)。
`或者我們也可以在vue.config.js中進(jìn)行配置``
module.exports = {
configureWebpack: {
devServer: {
historyApiFallback: false
}
}
}
以上就是vue組件historyApiFallback作用詳解的詳細(xì)內(nèi)容，更多關(guān)于vue組件historyApiFallback的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
對于前后端分離的項(xiàng)目,為了統(tǒng)一響應(yīng)參數(shù),需要將圖片轉(zhuǎn)換成base64的格式,下面這篇文章主要給大家介紹了關(guān)于vue圖片轉(zhuǎn)base64格式的相關(guān)資料,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vue實(shí)現(xiàn)自定義樹形組件的示例代碼,本文通過示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08
vue實(shí)現(xiàn)token過期自動跳轉(zhuǎn)到登錄頁面
本文主要介紹了vue實(shí)現(xiàn)token過期自動跳轉(zhuǎn)到登錄頁面，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
Vue實(shí)現(xiàn)選項(xiàng)卡tab切換制作
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)選項(xiàng)卡tab切換制作，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
使用Vue開發(fā)動態(tài)刷新Echarts組件的教程詳解
這篇文章主要介紹了使用Vue開發(fā)動態(tài)刷新Echarts組件的教程詳解,需要的朋友可以參考下2018-03-03
這篇文章主要介紹了vue組件中的數(shù)據(jù)傳遞方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-05-05
這篇文章主要介紹了graphQL在前端vue中使用過程,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03
一步步教你搭建VUE+VScode+elementUI開發(fā)環(huán)境
這篇文章主要給大家介紹了關(guān)于搭建VUE+VScode+elementUI開發(fā)環(huán)境的相關(guān)資料,近期被配置環(huán)境的事情弄得整個(gè)人都要炸了,現(xiàn)在整理如下,希望有相同需求的朋友可以不用走彎路,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了vue如何添加jest測試問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
本篇文章主要介紹了深入理解Vue transition源碼分析，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07