在搭建項目的時候，很多前端小伙伴在選擇路由模式的時候會嫌棄hash而偏愛history模式，因為hash模式的網址看起來“不正規”，里面總是有個難看的#，而history模式就沒有這個問題。

但接下來往往會發生這么一種情況，自己高高興興敲完代碼后打包部署到測試環境，這里點點哪里點點，看起來一切正常，直到測試同學用他那開過光的手點了下F5。

Duang！Nginx返回的404page把你干懵了！

不可能吧，開發環境明明是好好的啊！

可能你知道這是history模式的鍋，只是簡單的知道后端服務器要做一些專門的配置來適應這種模式，但如何配置卻不知道，也因為不了解原理不知道如何跟后端溝通叫后端配置，所以改回hash模式，從此對history敬而遠之。又或者根本不知道是這個模式的鍋，而在錯誤的道路上越走越遠，一直走，一直掉溝里。

首先要確認的是，history模式在生產環境極有可能會出現刷新無法找到頁面的情況，因為一般情況下，Nginx并不會對這種情況做配置。如果你折騰過一點Nginx，了解些皮毛，你會在/config/nginx.conf中發現如下配置：

location / {
  root   html;
  index  index.html index.htm;
}

這個配置的大概意思就是你訪問/路徑的時候，Nginx會匹配返回index.htm的資源，這種匹配邏輯在hash模式中不會產生問題，因為該模式，你不管這么折騰，url都沒有變化。http://test.example.com:3000/#/和http://test.example.com:3000/#/about的pathName都是/。所以在刷新頁面時，Nginx在匹配資源時遇上pathName為/時總是返回index.html。而在history模式里，http://test.example.com:3000/的pathName是/，http://test.example.com:3000/about的pathName的pathName是/about。所以當你在http://test.example.com:3000/頁刷新時，不會出現任何問題，會匹配上/返回index.html，而http://test.example.com:3000/about頁面刷新時，因pathName變成了/about，而ngxin中并沒有設置/about的匹配規則，這個時候就會返回404page了。

開發環境中沒有出現這個問題的原因是因為開發服務器對這個做了設置，所以不用操心。但測試和生產一般用的是nginx之類的服務器，所以需要配置。

怎么配置呢？

有兩種思路，一種是窮舉，一種是一鍋端。

窮舉就是把所有代碼中會產生的pathName列出來，讓其都指向index.html。一鍋端就是不管你什么pathName我都給指向index.html。窮舉繁雜，但有有個優勢，就是可以照舊配置404page，一鍋端省事，但你再怎么折騰都看不到nginx返回的404page了，因為所有不管是正常的還是異常的請求都被指向到了index.hmtl頁面。不過這個可以通過vue-router的路由設置彌補，就是不匹配的時候指向項目自身的404page頁。

一鍋端的方式需要將上面Nginx的配置做一點小調整。

location / {
  root   html;
  index  index.html index.htm;
  try_files $uri $uri/ /index.html;
}