vue?history模式刷新404原因及解決方法
項(xiàng)目場(chǎng)景：
提示：這里簡(jiǎn)述項(xiàng)目相關(guān)背景：
vue項(xiàng)目路由history模式
問(wèn)題描述
提示：這里描述項(xiàng)目中遇到的問(wèn)題：
vue history模式刷新404原因
原因分析：
因?yàn)樵趆istory模式下，只是動(dòng)態(tài)的通過(guò)js操作window.history來(lái)改變?yōu)g覽器地址欄里的路徑，并沒(méi)有發(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ù)器端并沒(méi)有這一個(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)文章
解決在el-dialog中無(wú)法正確獲取DOM的問(wèn)題
這篇文章主要介紹了解決在el-dialog中無(wú)法正確獲取DOM的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
element-plus中el-upload組件限制上傳文件類(lèi)型的方法
?Element Plus 中,el-upload 組件可以通過(guò)設(shè)置 accept 屬性來(lái)限制上傳文件的格式,這篇文章主要介紹了element-plus中el-upload組件限制上傳文件類(lèi)型,需要的朋友可以參考下2024-02-02
詳解如何在vue項(xiàng)目中使用eslint+prettier格式化代碼
在開(kāi)發(fā)中我們需要一種能夠統(tǒng)一團(tuán)隊(duì)代碼風(fēng)格的工具，作為強(qiáng)制性的規(guī)范，統(tǒng)一整個(gè)項(xiàng)目的代碼風(fēng)格，這篇文章主要介紹了詳解如何在vue項(xiàng)目中使用eslint+prettier格式化代碼，需要的朋友可以參考下2018-11-11
Vue實(shí)現(xiàn)Excel預(yù)覽功能使用場(chǎng)景示例詳解
這篇文章主要為大家介紹了Vue實(shí)現(xiàn)Excel預(yù)覽功能使用場(chǎng)景示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
vue swipeCell滑動(dòng)單元格(仿微信)的實(shí)現(xiàn)示例
這篇文章主要介紹了vue swipeCell滑動(dòng)單元格(仿微信)的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
TypeScript基本類(lèi)型 typeof 和keyof案例詳解
這篇文章主要介紹了TypeScript基本類(lèi)型 typeof 和keyof案例詳解,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-10-10
對(duì)于vue來(lái)說(shuō)，組件之間的消息傳遞是非常重要的，用vue可以是要組件復(fù)用的，而組件實(shí)例的作用域是相互獨(dú)立，這意味著不同組件之間的數(shù)據(jù)無(wú)法互相引用，一般來(lái)說(shuō)，組件之間可以有幾種關(guān)系，下面是我對(duì)組件之間消息傳遞的常用方式的總結(jié)2022-08-08
基于Vue3實(shí)現(xiàn)一個(gè)簡(jiǎn)單的方位動(dòng)畫(huà)
這篇文章主要為大家詳細(xì)介紹了如何基于Vue3實(shí)現(xiàn)一個(gè)簡(jiǎn)單的方位動(dòng)畫(huà),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-02-02
這篇文章主要給大家介紹了關(guān)于Vue3父子組件相互調(diào)用方法的相關(guān)資料,vue中我們常常用到組件,那么組件中互相調(diào)用也是經(jīng)常遇到的,需要的朋友可以參考下2023-08-08
這篇文章主要為大家詳細(xì)介紹了vue+echarts實(shí)現(xiàn)堆疊柱狀圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09