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

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

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

不可能吧，開發(fā)環(huán)境明明是好好的??！

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

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

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

這個配置的大概意思就是你訪問/路徑的時候，Nginx會匹配返回index.htm的資源，這種匹配邏輯在hash模式中不會產(chǎn)生問題，因為該模式，你不管這么折騰，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/頁刷新時，不會出現(xiàn)任何問題，會匹配上/返回index.html，而http://test.example.com:3000/about頁面刷新時，因pathName變成了/about，而ngxin中并沒有設置/about的匹配規(guī)則，這個時候就會返回404page了。

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

怎么配置呢？

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

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

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

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