關(guān)于vue項目部署后刷新網(wǎng)頁報404錯誤解決
我的項目，前端是vue項目在部署之后可以正常訪問，流程沒有問題，可是刷新之后瀏覽器會返回404錯誤。
部署使用的是nginx，經(jīng)常用來部署項目，所以容器肯定沒有問題，
這種問題在我直接啟動時并沒有出現(xiàn)過，所以可以猜測是打包時出現(xiàn)的問題，
報404錯誤說明是路由的問題
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 = [
........
]
// 動態(tài)路由，基于用戶權(quán)限動態(tài)去加載
export const dynamicRoutes = [
........
]
export default new Router({
mode: 'history',
scrollBehavior: () => ({ y: 0 }),
routes: constantRoutes
})公共路由與動態(tài)路由不會有錯，不然這個bug是撐不到部署才出現(xiàn)，只能是下方的初始化路由時出的問題。
看這句話：
mode: 'history',
router有兩種模式
1.hash模式：原理是onhashchange事件 請求中是在hash值之前的內(nèi)容,所以請求始終是有效的，如請求的是http://www.baidu.com/123456，只需要有http://www.baidu.com的路由就不會出現(xiàn)404錯誤所以改成這個就不會出現(xiàn)404錯誤。
2.history模式：原理是利用了h5的Interface 中的pushState()方法和replaceState()方法，它們提供了對瀏覽器歷史記錄進行修改的功能，但當(dāng)它們執(zhí)行修改時，雖然改變了當(dāng)前的 URL，但瀏覽器不會立即向后端發(fā)送請求。所以就造成了客戶端的URL和服務(wù)器請求的url不一致，才出現(xiàn)的url錯誤。
所以：
mode: 'hash',
成功解決
可是還有個問題：
這樣的話history模式的同步更新瀏覽器歷史記錄功能就沒有了，這肯定不行
所以我想到history模式出現(xiàn)404無非是因為客戶端的URL和服務(wù)器請求的url不一致導(dǎo)致的，我們可以在服務(wù)器訪問受限時指定一個登記過的全局路由，就是首頁面，這樣就可以通過路由的檢測，從而達到hash模式的效果了，所以要在nginx.config中修改：
重啟nginx，測試沒問題，解決。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3使用postcss-px-to-viewport實現(xiàn)頁面自適應(yīng)
postcss-px-to-viewport 是一個 PostCSS 插件,它可以將 px 單位轉(zhuǎn)換為視口單位,下面我們就看看如何使用postcss-px-to-viewport實現(xiàn)頁面自適應(yīng)吧2024-01-01
vue使用swiper實現(xiàn)中間大兩邊小的輪播圖效果
這篇文章主要介紹了vue使用swiper實現(xiàn)中間大兩邊小的輪播圖效果，本文分步驟通過實例代碼講解的非常詳細(xì),需要的朋友可以參考下2019-11-11
這篇文章主要為大家介紹了vue-devtools 打開源碼位置實現(xiàn)過程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要給大家介紹了關(guān)于如何使用vue3簡單實現(xiàn)WebSocket通信的相關(guān)資料,WebSocket是全雙工網(wǎng)絡(luò)通信通信協(xié)議,實現(xiàn)了客戶端和服務(wù)器的平等對話,任何一方都可以主動發(fā)送數(shù)據(jù),需要的朋友可以參考下2023-08-08
詳解vue beforeEach 死循環(huán)問題解決方法
這篇文章主要介紹了vue beforeEach 死循環(huán)問題解決方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
這篇文章主要為大家詳細(xì)介紹了vue+highCharts實現(xiàn)可選范圍的圖表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了Nuxt.js實戰(zhàn)和配置，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要介紹了Vue聲明式渲染詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
vue.js el-tooltip根據(jù)文字長度控制是否提示toolTip問題
這篇文章主要介紹了vue.js el-tooltip根據(jù)文字長度控制是否提示toolTip問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
這篇文章主要介紹了Vue.js中關(guān)于“{{}}”的用法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09