關(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)文章
這篇文章主要介紹了Vue-cli4 配置 element-ui 按需引入操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要給大家介紹了關(guān)于vue圖片加載失敗時用默認(rèn)圖片替換的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
element ui 表格動態(tài)列顯示空白bug 修復(fù)方法
今天小編就為大家分享一篇element ui 表格動態(tài)列顯示空白bug 修復(fù)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
可能是全網(wǎng)vue?v-model最詳細(xì)講解教程
Vue官網(wǎng)教程上關(guān)于v-model的講解不是十分的詳細(xì),寫這篇文章的目的就是詳細(xì)的剖析一下,下面這篇文章主要給大家介紹了關(guān)于vue?v-model最詳細(xì)講解的相關(guān)資料,需要的朋友可以參考下2022-11-11
vue使用拖拽方式創(chuàng)建結(jié)構(gòu)樹
這篇文章主要為大家詳細(xì)介紹了vue使用拖拽方式創(chuàng)建結(jié)構(gòu)樹，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
Vue是可以自定義指令的,最近學(xué)習(xí)過程中遇見了一個需要懶加載的功能，發(fā)現(xiàn)網(wǎng)上這方面的資料較少，所以下面這篇文章主要給大家介紹了關(guān)于Vue.js如何實現(xiàn)路由懶加載的相關(guān)資料，需要的朋友可以參考借鑒，下面來一起看看吧。2017-08-08
VUE 項目在IE11白屏報錯 SCRIPT1002: 語法錯誤的解決
這篇文章主要介紹了VUE 項目在IE11白屏報錯 SCRIPT1002: 語法錯誤的解決，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
完美解決vue 中多個echarts圖表自適應(yīng)的問題
這篇文章主要介紹了完美解決vue 中多個echarts圖表自適應(yīng)的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了vue2路由基本用法,結(jié)合實例形式分析了vue2路由基本功能、原理、用法與操作注意事項,需要的朋友可以參考下2020-03-03
elementplus?card?懸浮菜單的實現(xiàn)
本文主要介紹了elementplus?card?懸浮菜單的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07