轉(zhuǎn)載自：https://segmentfault.com/a/1190000019391139

vue-router分為hash和history模式，前者為其默認(rèn)模式，url的表現(xiàn)形式為http://yoursite.com#home矛缨，比較難看扯饶。后者的url表現(xiàn)形式為http://yoursite.com/home腰湾，比較美觀。

但如果要使用history模式疆股，我們需要在后端進(jìn)行額外配置费坊。本文將討論如何配置以及為什么要這樣配置。

history模式的配置方法

我們來看看官方文檔是教我們怎么配置的：HTML5 History 模式旬痹。

首先要將mode設(shè)置為history：

constrouter =newVueRouter({mode:'history',routes: [...]})

然后設(shè)置后端（這里采用的nginx）：

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

然后就......沒了附井！顯然官方的教程講的比較簡略，并且我們參照這個(gè)教程實(shí)際上還是會(huì)遇到一些問題两残。

history模式的配置實(shí)踐及原理

強(qiáng)烈建議：閱讀這部分之前永毅，先看一下nginx的這部分文檔和這部分文檔。

既然官方文檔教我們這樣做了人弓，我們就按照它說的來實(shí)踐一下沼死。

只配置前端的情況

首先，我們將mode設(shè)置為history票从，但不配置后端漫雕。然后，假如我們的路由是長這個(gè)樣子的：

constroutes = [? ? {path:'/home',component: Home},? ? {path:'/',redirect:'/home'}];

我們用nginx部署項(xiàng)目峰鄙，然后在地址欄輸入http://localhost:8080（這里配置的端口是8080）浸间，你會(huì)發(fā)現(xiàn)地址欄之后會(huì)變?yōu)閔ttp://localhost:8080/home，并且看起來一切正常吟榴，似乎路由也可以正常切換而不會(huì)發(fā)生其他問題（實(shí)際上會(huì)發(fā)生問題魁蒜，后面會(huì)進(jìn)行討論）》苑看起來好像不需要按官網(wǎng)告訴我們的那樣配置后端也能實(shí)現(xiàn)history模式兜看，但如果你直接在地址欄輸入http://localhost:8080/home，你會(huì)發(fā)現(xiàn)你獲得了一個(gè)404頁面狭瞎。

那么http://localhost:8080為什么可以（部分）正常顯示呢细移？道理其實(shí)很簡單，你訪問http://localhost:8080時(shí)熊锭，靜態(tài)服務(wù)器（這里是nginx）會(huì)默認(rèn)去目標(biāo)目錄（這里為location中root所指定的目錄）下尋找index.html（這是nginx在端口后沒有額外路徑時(shí)的默認(rèn)行為）弧轧，目標(biāo)目錄下有這個(gè)文件嗎？有碗殷！然后靜態(tài)服務(wù)器返回給你這個(gè)文件精绎，配合vue-router進(jìn)行轉(zhuǎn)發(fā)，自然可以（部分）正常顯示锌妻。

但如果直接訪問http://localhost:8080/home代乃，靜態(tài)服務(wù)器會(huì)去目標(biāo)目錄下尋找home文件，目標(biāo)目錄下有這個(gè)文件嗎仿粹？沒有搁吓！所以自然就404了。

配置后端

為了達(dá)到直接訪問http://localhost:8080/home也可以成功的目的吭历，我們需要對(duì)后端（這里即nginx）進(jìn)行一些配置擎浴。

首先想想，要怎樣才能達(dá)到這個(gè)目的呢毒涧？

在傳統(tǒng)的hash模式中（http://localhost:8080#home）贮预，即使不需要配置，靜態(tài)服務(wù)器始終會(huì)去尋找index.html并返回給我們契讲，然后vue-router會(huì)獲取#后面的字符作為參數(shù)仿吞，對(duì)前端頁面進(jìn)行變換。

類比一下捡偏，在history模式中唤冈，我們所想要的情況就是：輸入http://localhost:8080/home，但最終返回的也是index.html银伟，然后vue-router會(huì)獲取home作為參數(shù)你虹，對(duì)前端頁面進(jìn)行變換绘搞。那么在nginx中，誰能做到這件事呢傅物？答案就是try_files夯辖。

首先看一下try_files的語法：try_files?file ... uri;

然后看一下官方文檔對(duì)它的介紹：

Checks the existence of files in the specified order and uses the first found file for request processing; the processing is performed in the current context. The path to a file is constructed from the file parameter according to the root and alias directives. It is possible to check directory’s existence by specifying a slash at the end of a name, e.g. “$uri/”. If none of the files were found, an internal redirect to the uri specified in the last parameter is made.

大意就是它會(huì)按照try_files后面的參數(shù)依次去匹配root中對(duì)應(yīng)的文件或文件夾。如果匹配到的是一個(gè)文件董饰，那么將返回這個(gè)文件蒿褂；如果匹配到的是一個(gè)文件夾，那么將返回這個(gè)文件夾中index指令指定的文件卒暂。最后一個(gè)uri參數(shù)將作為前面沒有匹配到的fallback啄栓。（注意try_files指令至少需要兩個(gè)參數(shù)）

拿我自己的網(wǎng)站舉個(gè)例子：

location/ {root/data/www/rf-blog-web;indexindex.html;try_files$uri $uri/ /index.html; }

$uri是nginx中的變量，比如我訪問的網(wǎng)址是http://localhost:8080/home也祠，那么它就代表的/home昙楚。

在rf-blog-web這個(gè)目錄中，沒有子目錄诈嘿，只有一個(gè)index.html和一些壓縮后的名稱是hash值的.js文件桂肌。當(dāng)我們請(qǐng)求http://localhost:8080/home這個(gè)地址時(shí)，首先查找有無home這個(gè)文件永淌，沒有崎场；再查找有無home目錄，也沒有遂蛀。所以最終會(huì)定位到第三個(gè)參數(shù)從而返回index.html谭跨，按照這個(gè)規(guī)則，所有路由里的url路徑最后都會(huì)定位到index.html李滴。vue-router再獲取參數(shù)進(jìn)行前端頁面的變換螃宙，至此，我們已經(jīng)可以通過http://localhost:8080/home這個(gè)地址進(jìn)行成功地訪問了所坯。

而$uri這個(gè)參數(shù)的作用其實(shí)是匹配那些.js文件用的谆扎，而$uri/在這個(gè)例子中并沒有多大用，實(shí)際上是可以去掉的芹助。

history模式下可能會(huì)遇到的問題及解決方案

在將我的項(xiàng)目（在路由中用了懶加載）改為history模式的過程中堂湖，有時(shí)候發(fā)現(xiàn)會(huì)出現(xiàn)chunk加載出錯(cuò)的情況，打開chrome的network發(fā)現(xiàn)那個(gè)chunk加載404了状土，是因?yàn)檎?qǐng)求的url中多了一層路徑无蜂。我在這里發(fā)現(xiàn)了解決方案。

LinusBorg說蒙谓，因?yàn)樵趆istory模式中切換路由時(shí)斥季，我們是真正改變了頁面的url路徑，所以webpack的runtime會(huì)認(rèn)為它位于example.com/some/path累驮。如果publicPath是設(shè)置的相對(duì)路徑酣倾，那么webpack加載chunk時(shí)可能會(huì)變成example.com/some/path/static/js/3.js這樣的路徑舵揭，然而chunk的真正路徑是example.com/static/js/3.js，所以我們需要將publicPath設(shè)置為絕對(duì)路徑（publicPath: '/'）來解決這個(gè)問題躁锡。