42. Vue、React 等前端項(xiàng)目部署，刷新 404 問題解決方案

caiyongji 發(fā)布于2019-07-25 14:38 / 1797人閱讀

摘要：發(fā)現(xiàn)路徑下是靜態(tài)文件的目錄，不是的目錄沒有文件，就會(huì)規(guī)則，返回這樣瀏覽器拿到之后，開始加載其中的前端路由部分這時(shí)候就會(huì)在前端路由中找到匹配規(guī)則同理也可以寫在前端路由中了

首發(fā)于我的github博客, 歡迎關(guān)注
nginx 匹配的 try_file 與前端路由的優(yōu)先級問題

場景描述:

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

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

奇怪的地方就在于，為何退出的時(shí)候，重定向到/login的時(shí)候，沒有報(bào)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,
    }
  ]

現(xiàn)有nginx配置

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

解決：

為何點(diǎn)擊退出可以正常顯示登錄頁面？

因?yàn)辄c(diǎn)擊退出，使用的redirect是前端路由this.$router.push({name: "login"});來實(shí)現(xiàn)的，這時(shí)候已經(jīng)有index.html 和相關(guān)的js了，可以直接使用前端路由跳轉(zhuǎn)到/login路由對應(yīng)的組件

為何刷新的時(shí)候顯示: nginx/404？

因?yàn)樗⑿碌臅r(shí)候，會(huì)先向服務(wù)器請求xxxx.com/login，
這時(shí)候服務(wù)器的nginx配置中沒有關(guān)于/login路徑的配置，直接報(bào)nginx/404的錯(cuò)誤

如何解決？

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

解釋：

nginx進(jìn)行匹配路徑的時(shí)候，發(fā)現(xiàn)沒有/login的路徑，便會(huì)轉(zhuǎn)到/路徑處理。
發(fā)現(xiàn)root路徑下(是靜態(tài)文件的root目錄，不是linux的root目錄)沒有login文件，就會(huì)try_file規(guī)則，返回index.html,
這樣瀏覽器拿到index.html 之后，開始加載其中的前端路由部分
這時(shí)候/login就會(huì)在前端路由中找到匹配規(guī)則

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