因為在history模式下，只是動態(tài)的通過js操作window.history來改變?yōu)g覽器地址欄里的路徑，并沒有發(fā)起http請求，但是當我直接在瀏覽器里輸入這個地址的時候，就一定要對服務器發(fā)起http請求，但是這個目標在服務器上又不存在，所以會返回404 解決方案：

第一步

如何切換history模式在router.js中配置

const router = new VueRouter({
mode: ‘history',
base: process.env.BASE_URL,
routes,
// 切換路由后滾動條置頂
scrollBehavior() {
return {
x: 0,
y: 0
}
}
})
export default router

第二步

module.exports = {
publicPath: ‘/', //這個必須，引入靜態(tài)資源需要從根路徑引入，否則會找不到靜態(tài)資源
devServer: {
// history模式下的url會請求到服務器端，但是服務器端并沒有這一個資源文件，就會返回404，所以需要配置這一項
historyApiFallback: {
index: ‘/index.html' //與output的publicPath
},
},
}

總結

到此這篇關于vue history模式刷新404原因及解決的文章就介紹到這了,更多相關vue history模式刷新404內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

解決在el-dialog中無法正確獲取DOM的問題
這篇文章主要介紹了解決在el-dialog中無法正確獲取DOM的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03
element-plus中el-upload組件限制上傳文件類型的方法
?Element Plus 中,el-upload 組件可以通過設置 accept 屬性來限制上傳文件的格式,這篇文章主要介紹了element-plus中el-upload組件限制上傳文件類型,需要的朋友可以參考下
2024-02-02
詳解如何在vue項目中使用eslint+prettier格式化代碼
在開發(fā)中我們需要一種能夠統(tǒng)一團隊代碼風格的工具，作為強制性的規(guī)范，統(tǒng)一整個項目的代碼風格，這篇文章主要介紹了詳解如何在vue項目中使用eslint+prettier格式化代碼，需要的朋友可以參考下
2018-11-11
Vue實現(xiàn)Excel預覽功能使用場景示例詳解
這篇文章主要為大家介紹了Vue實現(xiàn)Excel預覽功能使用場景示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2023-09-09
vue swipeCell滑動單元格(仿微信)的實現(xiàn)示例
這篇文章主要介紹了vue swipeCell滑動單元格(仿微信)的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-09-09
TypeScript基本類型 typeof 和keyof案例詳解
這篇文章主要介紹了TypeScript基本類型 typeof 和keyof案例詳解,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2023-10-10
Vue組件通信深入分析
對于vue來說，組件之間的消息傳遞是非常重要的，用vue可以是要組件復用的，而組件實例的作用域是相互獨立，這意味著不同組件之間的數(shù)據(jù)無法互相引用，一般來說，組件之間可以有幾種關系，下面是我對組件之間消息傳遞的常用方式的總結
2022-08-08
基于Vue3實現(xiàn)一個簡單的方位動畫
這篇文章主要為大家詳細介紹了如何基于Vue3實現(xiàn)一個簡單的方位動畫,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下
2024-02-02
Vue3父子組件相互調用方法舉例詳解
這篇文章主要給大家介紹了關于Vue3父子組件相互調用方法的相關資料,vue中我們常常用到組件,那么組件中互相調用也是經常遇到的,需要的朋友可以參考下
2023-08-08
vue+echarts實現(xiàn)堆疊柱狀圖
這篇文章主要為大家詳細介紹了vue+echarts實現(xiàn)堆疊柱狀圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-09-09