本篇博客主要是詳細(xì)總結(jié)一下vue中的historyApiFallback的作用。

當(dāng)我們?cè)跒g覽器中輸入一個(gè)網(wǎng)址(比如說(shuō)是：http://www.edit.com),此時(shí)會(huì)經(jīng)過(guò)dns解析，拿到ip地址然后根據(jù)ip地址向該服務(wù)器發(fā)起請(qǐng)求，服務(wù)器接受到請(qǐng)求之后，然后返回相應(yīng)的結(jié)果(html,css,js)。

如果我們?cè)谇岸嗽O(shè)置了重定向，此時(shí)頁(yè)面會(huì)進(jìn)行跳轉(zhuǎn)到http://www.edit.com/home,在前端會(huì)進(jìn)行匹配對(duì)應(yīng)的組件然后將其渲染到頁(yè)面上。此時(shí)如果我們刷新頁(yè)面的話，瀏覽器會(huì)發(fā)送新的請(qǐng)求http://www.edit.com/home,如果后端服務(wù)器沒(méi)有/home對(duì)應(yīng)的接口，此時(shí)會(huì)返回404，但是一般我們配置nginx進(jìn)行代理，此時(shí)在Nginx中進(jìn)行相關(guān)配置，就可以解決該問(wèn)題。

如下圖所示為nginx中進(jìn)行配置。

該配置的意思就是請(qǐng)求路徑對(duì)應(yīng)的接口時(shí)，此時(shí)就返回首頁(yè)數(shù)據(jù)，此時(shí)當(dāng)前端拿到該數(shù)據(jù)時(shí)，此時(shí)根據(jù)前端路由來(lái)匹配相應(yīng)的組件即可。

本地服務(wù)器

如果我們?cè)诒镜亻_(kāi)啟服務(wù)器，此時(shí)當(dāng)我們進(jìn)行刷新時(shí)，瀏覽器會(huì)拿著該地址localhost:8000/home向本地服務(wù)器發(fā)起請(qǐng)求，但是本地不存在/home的文件夾，所以會(huì)返回404。如下圖所示。

但我們刷新時(shí)，不會(huì)出現(xiàn)錯(cuò)誤，原因是vue-cli中默認(rèn)在webpack中幫我們配置好了

如果我們將其改為false,此時(shí)就會(huì)出錯(cuò)。

`或者我們也可以在vue.config.js中進(jìn)行配置``

module.exports = {
  configureWebpack: {
    devServer: {
      historyApiFallback: false
    }
  }
}

以上就是vue組件historyApiFallback作用詳解的詳細(xì)內(nèi)容，更多關(guān)于vue組件historyApiFallback的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論