首發于我的github博客, 歡迎關注
nginx 匹配的 try_file 與前端路由的優先級問題

場景描述:

訪問www.abc.com， 之后點擊界面里面的logout，前端路由處理，跳轉到www.abc.com/login

但是登錄頁面刷新之后，就顯示nginx 404了

奇怪的地方就在于，為何退出的時候，重定向到/login的時候，沒有報404?

前端路由重定向到/login邏輯：this.$router.push({name: 'login'});

貼下前端路由配置

routes: [{name: 'home',path: '/',component: Home,meta: { requiresAuth: true },},{path: '/login',name: 'login',component: Login,},{path: '*',component: NotFound,}]

現有nginx配置

location / {root: /var/data/static; }

解決：

為何點擊退出可以正常顯示登錄頁面？

因為點擊退出，使用的redirect是前端路由this.$router.push({name: 'login'});來實現的，這時候已經有index.html 和相關的js了，可以直接使用前端路由跳轉到/login路由對應的組件

為何刷新的時候顯示: nginx/404？

因為刷新的時候，會先向服務器請求xxxx.com/login，

這時候服務器的nginx配置中沒有關于/login路徑的配置，直接報nginx/404的錯誤

如何解決？

在nginx的location /{root xxxpath}中添加try_file: /index.html的配置

解釋：

nginx進行匹配路徑的時候，發現沒有/login的路徑，便會轉到/路徑處理。

發現root路徑下(是靜態文件的root目錄，不是linux的root目錄)沒有login文件，就會try_file規則，返回index.html,

這樣瀏覽器拿到index.html 之后，開始加載其中的前端路由部分

這時候/login就會在前端路由中找到匹配規則

同理／404也可以寫在前端路由中了

總結

以上是生活随笔為你收集整理的42. Vue、React 等前端项目部署，刷新 404 问题解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。

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