資訊專欄INFORMATION COLUMN
摘要：發現路徑下是靜態文件的目錄，不是的目錄沒有文件，就會規則，返回這樣瀏覽器拿到之后，開始加載其中的前端路由部分這時候就會在前端路由中找到匹配規則同理也可以寫在前端路由中了
首發于我的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也可以寫在前端路由中了
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/40324.html
摘要：前言本文講解的是做為前端開發人員，對服務器的了解還是小白的我，是如何一步步將項目部署在阿里云的服務器上，并進行性能優化，達到頁面秒內看到，秒內看到首屏內容的。搭建的項目是采用了主流的前后端分離思想的，這里只講服務器環境搭建與性能優化。 showImg(https://segmentfault.com/img/remote/1460000017143281); 前言 本文講解的是：做為前...
摘要：服務端渲染等服務端渲染框架構建的項目部署到服務器，并用守護程序最近好多伙伴說，我用做的項目本地是可以的，但部署到服務器遇到好多問題資源找不到，直接訪問頁面空白，刷新當前路由。。。 服務端渲染：next.js、nuxt.js等服務端渲染框架構建的項目部署到服務器，并用PM2守護程序 最近好多伙伴說，我用vue做的項目本地是可以的，但部署到服務器遇到好多問題：資源找不到，直接訪問inde...
摘要：并總結經典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快速搭建項目。 本文是關注微信小程序的開發和面試問題，由基礎到困難循序漸進，適合面試和開發小程序。并總結vue React html css js 經典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快...
閱讀 2341·2023-04-25 14:29
閱讀 1466·2021-11-22 09:34
閱讀 2709·2021-11-22 09:34
閱讀 3396·2021-11-11 10:59
閱讀 1860·2021-09-26 09:46
閱讀 2231·2021-09-22 16:03
閱讀 1928·2019-08-30 12:56
閱讀 483·2019-08-30 11:12
