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

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

1. 場景描述:

   1. 訪問www.abc.com， 之後點擊界面裏面的logout，前端路由處理，跳轉到www.abc.com/login
   2. 但是登錄頁面刷新之後，就顯示nginx 404了
   3. 奇怪的地方就在於，爲何退出的時候，重定向到/login的時候，沒有報404?
   4. 前端路由重定向到/login邏輯：this.$router.push({name: 'login'});

   5. 貼下前端路由配置

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

   6. 現有nginx配置

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

2. 解決：

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

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

   2. 爲何刷新的時候顯示: nginx/404？

      1. 因爲刷新的時候，會先向服務器請求xxxx.com/login，
      2. 這時候服務器的nginx配置中沒有關於/login路徑的配置，直接報nginx/404的錯誤

   3. 如何解決？

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

   4. 解釋：

      1. nginx進行匹配路徑的時候，發現沒有/login的路徑，便會轉到/路徑處理。
      2. 發現root路徑下(是靜態文件的root目錄，不是linux的root目錄)沒有login文件，就會try_file規則，返回index.html,
      3. 這樣瀏覽器拿到index.html 之後，開始加載其中的前端路由部分
      4. 這時候/login就會在前端路由中找到匹配規則

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