我的項目，前端是vue項目在部署之后可以正常訪問，流程沒有問題，可是刷新之后瀏覽器會返回404錯誤。
部署使用的是nginx，經常用來部署項目，所以容器肯定沒有問題，
這種問題在我直接啟動時并沒有出現過，所以可以猜測是打包時出現的問題，
報404錯誤說明是路由的問題，vue管理路由的是"router" 目標明確了，去找router的配置文件

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

公共路由與動態路由不會有錯，不然這個bug是撐不到部署才出現，只能是下方的初始化路由時出的問題。
看這句話：

mode: 'history',

router有兩種模式
1.hash模式：原理是onhashchange事件 請求中是在hash值之前的內容,所以請求始終是有效的，如請求的是
http://www.baidu.com/123456，只需要有http://www.baidu.com的路由就不會出現404錯誤所以改成這個就不會出現404錯誤。

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

所以：

mode: 'hash',

成功解決

可是還有個問題：
這樣的話history模式的同步更新瀏覽器歷史記錄功能就沒有了，這肯定不行

所以我想到history模式出現404無非是因為客戶端的URL和服務器請求的url不一致導致的，我們可以在服務器訪問受限時指定一個登記過的全局路由，就是首頁面，這樣就可以通過路由的檢測，從而達到hash模式的效果了，所以要在nginx.config中修改：

重啟nginx，測試沒問題，解決。

總結

以上是生活随笔為你收集整理的vue项目部署后刷新网页报404错误解决的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。