vue?history模式刷新404原因及解決方法
更新時(shí)間：2022年09月01日 10:03:24 作者：花與少年丶
vue路由的URL有兩種模式,一種是?hash,一種是history,下面這篇文章主要給大家介紹了關(guān)于vue?history模式刷新404原因及解決方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
項(xiàng)目場(chǎng)景：
提示：這里簡(jiǎn)述項(xiàng)目相關(guān)背景：
vue項(xiàng)目路由history模式
問題描述
提示：這里描述項(xiàng)目中遇到的問題：
vue history模式刷新404原因
原因分析：
因?yàn)樵趆istory模式下，只是動(dòng)態(tài)的通過js操作window.history來改變?yōu)g覽器地址欄里的路徑，并沒有發(fā)起http請(qǐng)求，但是當(dāng)我直接在瀏覽器里輸入這個(gè)地址的時(shí)候，就一定要對(duì)服務(wù)器發(fā)起http請(qǐng)求，但是這個(gè)目標(biāo)在服務(wù)器上又不存在，所以會(huì)返回404 解決方案：
第一步
如何切換history模式 在router.js中配置
const router = new VueRouter({
mode: ‘history',
base: process.env.BASE_URL,
routes,
// 切換路由后滾動(dòng)條置頂
scrollBehavior() {
return {
x: 0,
y: 0
}
}
})
export default router第二步
module.exports = {
publicPath: ‘/', //這個(gè)必須，引入靜態(tài)資源需要從根路徑引入，否則會(huì)找不到靜態(tài)資源
devServer: {
// history模式下的url會(huì)請(qǐng)求到服務(wù)器端，但是服務(wù)器端并沒有這一個(gè)資源文件，就會(huì)返回404，所以需要配置這一項(xiàng)
historyApiFallback: {
index: ‘/index.html' //與output的publicPath
},
},
}總結(jié)
到此這篇關(guān)于vue history模式刷新404原因及解決的文章就介紹到這了,更多相關(guān)vue history模式刷新404內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue+vue-validator 表單驗(yàn)證功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue+vue-validator 表單驗(yàn)證功能的實(shí)現(xiàn)代碼,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-11-11
這篇文章主要介紹了Vue2的diff算法規(guī)則原理詳解，diff?算法，就是通過比對(duì)新舊兩個(gè)虛擬節(jié)點(diǎn)不一樣的地方，針對(duì)那些不一樣的地方進(jìn)行新增或更新或刪除操作。接下來我們?cè)敿?xì)介紹節(jié)點(diǎn)更新的過程2022-06-06
這篇文章主要介紹了vue的hash跳轉(zhuǎn)原理，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
今天在移動(dòng)端項(xiàng)目中遇見一個(gè)需求,需要數(shù)據(jù)無限滾動(dòng),所以下面這篇文章主要給大家介紹了關(guān)于手寫vue無限滾動(dòng)指令的詳細(xì)過程,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
這篇文章主要介紹了Vue.native如何將原生事件綁定到組件問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue實(shí)現(xiàn)雙向數(shù)據(jù)綁定
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)雙向數(shù)據(jù)綁定，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
這篇文章主要介紹了vue添加vue-awesome-swiper輪播組件方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
axios是用來做數(shù)據(jù)交互的插件，最近正在學(xué)習(xí)axios，所以想著整理成筆記方便大家和自己參考學(xué)習(xí)，下面這篇文章主要跟大家介紹了關(guān)于Axios使用方法的相關(guān)資料，需要的朋友們下面來一起看看吧。2017-07-07
這篇文章主要為大家詳細(xì)介紹了Vue如何將頁面導(dǎo)出成PDF文件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
這篇文章主要給大家介紹了關(guān)于Vue中forEach()使用方法的相關(guān)資料,forEach和map是數(shù)組的兩個(gè)方法,作用都是遍歷數(shù)組,在vue項(xiàng)目的處理數(shù)據(jù)中經(jīng)常會(huì)用到,需要的朋友可以參考下2023-09-09