關於vue項目部署後刷新網頁報404錯誤解決

Posted on by

我的項目，前端是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，測試沒問題，解決。

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：