快捷導(dǎo)航

關(guān)于vue項(xiàng)目部署后刷新網(wǎng)頁(yè)報(bào)404錯(cuò)誤解決

更新時(shí)間：2022年07月21日 08:54:07 作者：荒野漫步者

這篇文章主要介紹了關(guān)于vue項(xiàng)目部署后刷新網(wǎng)頁(yè)報(bào)404錯(cuò)誤解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

報(bào)404錯(cuò)誤說(shuō)明是路由的問(wèn)題

vue管理路由的是"router" 目標(biāo)明確了，去找router的配置文件

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
/* Layout */
import Layout from '@/layout'
// 公共路由
export const constantRoutes = [
	........
]
// 動(dòng)態(tài)路由，基于用戶權(quán)限動(dòng)態(tài)去加載
export const dynamicRoutes = [
	........
]
export default new Router({
  mode: 'history',
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

公共路由與動(dòng)態(tài)路由不會(huì)有錯(cuò)，不然這個(gè)bug是撐不到部署才出現(xiàn)，只能是下方的初始化路由時(shí)出的問(wèn)題。

看這句話：

mode: 'history',

router有兩種模式

1.hash模式：原理是onhashchange事件請(qǐng)求中是在hash值之前的內(nèi)容,所以請(qǐng)求始終是有效的，如請(qǐng)求的是http://www.baidu.com/123456，只需要有http://www.baidu.com的路由就不會(huì)出現(xiàn)404錯(cuò)誤所以改成這個(gè)就不會(huì)出現(xiàn)404錯(cuò)誤。

2.history模式：原理是利用了h5的Interface 中的pushState()方法和replaceState()方法，它們提供了對(duì)瀏覽器歷史記錄進(jìn)行修改的功能，但當(dāng)它們執(zhí)行修改時(shí)，雖然改變了當(dāng)前的 URL，但瀏覽器不會(huì)立即向后端發(fā)送請(qǐng)求。所以就造成了客戶端的URL和服務(wù)器請(qǐng)求的url不一致，才出現(xiàn)的url錯(cuò)誤。

所以：

mode: 'hash',

成功解決

可是還有個(gè)問(wèn)題：

這樣的話history模式的同步更新瀏覽器歷史記錄功能就沒(méi)有了，這肯定不行

所以我想到history模式出現(xiàn)404無(wú)非是因?yàn)榭蛻舳说腢RL和服務(wù)器請(qǐng)求的url不一致導(dǎo)致的，我們可以在服務(wù)器訪問(wèn)受限時(shí)指定一個(gè)登記過(guò)的全局路由，就是首頁(yè)面，這樣就可以通過(guò)路由的檢測(cè)，從而達(dá)到hash模式的效果了，所以要在nginx.config中修改：