vue組件historyApiFallback作用詳解
本篇博客主要是詳細總結一下vue中的historyApiFallback的作用。
當我們在瀏覽器中輸入一個網(wǎng)址(比如說是：http://www.edit.com),此時會經(jīng)過dns解析，拿到ip地址然后根據(jù)ip地址向該服務器發(fā)起請求，服務器接受到請求之后，然后返回相應的結果(html,css,js)。
如果我們在前端設置了重定向，此時頁面會進行跳轉到http://www.edit.com/home,在前端會進行匹配對應的組件然后將其渲染到頁面上。此時如果我們刷新頁面的話，瀏覽器會發(fā)送新的請求http://www.edit.com/home,如果后端服務器沒有/home對應的接口，此時會返回404，但是一般我們配置nginx進行代理，此時在Nginx中進行相關配置，就可以解決該問題。
如下圖所示為nginx中進行配置。
該配置的意思就是請求路徑對應的接口時，此時就返回首頁數(shù)據(jù)，此時當前端拿到該數(shù)據(jù)時，此時根據(jù)前端路由來匹配相應的組件即可。
本地服務器
如果我們在本地開啟服務器，此時當我們進行刷新時，瀏覽器會拿著該地址localhost:8000/home向本地服務器發(fā)起請求，但是本地不存在/home的文件夾，所以會返回404。如下圖所示。
但我們刷新時，不會出現(xiàn)錯誤，原因是vue-cli中默認在webpack中幫我們配置好了
如果我們將其改為false,此時就會出錯。
`或者我們也可以在vue.config.js中進行配置``
module.exports = {
configureWebpack: {
devServer: {
historyApiFallback: false
}
}
}
以上就是vue組件historyApiFallback作用詳解的詳細內容，更多關于vue組件historyApiFallback的資料請關注腳本之家其它相關文章！
相關文章
教你使用vue-autofit 一行代碼搞定自適應可視化大屏
這篇文章主要為大家介紹了使用vue-autofit 一行代碼搞定自適應可視化大屏教程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
Vue3.0動態(tài)路由No?match?found?for?location?with?path警告解決辦法
這篇文章主要介紹了Vue3.0動態(tài)路由No?match?found?for?location?with?path警告的解決辦法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-01-01
Vue通過for循環(huán)隨機生成不同的顏色或隨機數(shù)的實例
今天小編就為大家分享一篇Vue通過for循環(huán)隨機生成不同的顏色或隨機數(shù)的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue就是前端上的Java,前端上的C#,有個前端的虛擬DOM引擎,設計理念和Java/C#類似,這篇文章主要給大家介紹了關于Vue新手指南之環(huán)境搭建及入門的相關資料,需要的朋友可以參考下2021-08-08
Electron采集桌面共享和系統(tǒng)音頻(桌面捕獲)實例
這篇文章主要為大家介紹了Electron采集桌面共享和系統(tǒng)音頻(桌面捕獲)實現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-10-10
本文分步驟給大家介紹了Vue 1.0自定義動畫效果，vue1.0代碼結合animate.css定義動畫，頁面一定要引入animate.cdd，具體實例代碼大家參考下本文2018-07-07
這篇文章主要介紹了Mpvue中使用Vant Weapp組件庫的方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
這篇文章主要為大家詳細介紹了Vue3實現(xiàn)圖片放大鏡效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要為大家介紹了Vue?element樹形控件添加虛線，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助<BR>2021-11-11
這篇文章主要介紹了vant 自定義 van-dropdown-item的用法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08