寫(xiě)在前面

10年積累的成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶(hù)對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶(hù)得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有秦皇島免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

Vue-Router 有兩種模式，默認(rèn)是 hash 模式，另外一種是 history 模式。

• hash：也就是地址欄里的 # 符號(hào)。比如 http://www.example/#/hello，hash 的值為 #/hello。特點(diǎn)：hash 雖然出現(xiàn) URL 中，但不會(huì)被包含在 HTTP 請(qǐng)求中，對(duì)后端不會(huì)產(chǎn)生什么影響，改變 URL 不會(huì)重載頁(yè)面。
• history：利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法，來(lái)完成 URL 跳轉(zhuǎn)而無(wú)須重新加載頁(yè)面。（需要特定瀏覽器支持）

hash 和 history 兩種模式都是基于瀏覽器自身的屬性，vue-router 只是利用了這兩個(gè)特性（底層還是瀏覽器提供的接口）來(lái)實(shí)現(xiàn)前端路由。

使用場(chǎng)景

一般來(lái)說(shuō)，兩種模式都是可以的。除非在意不太漂亮的 #，只能選擇 history。

這兩種模式在開(kāi)發(fā)環(huán)境下都沒(méi)有什么太大的問(wèn)題，但是當(dāng)部署到生產(chǎn)環(huán)境中后，兩者有所不同。

hash 模式部署沒(méi)有什么問(wèn)題，只要訪(fǎng)問(wèn)到服務(wù)器上的 index.html，就可以訪(fǎng)問(wèn)網(wǎng)站了。
history 模式下，前端的 URL 必須和實(shí)際向后端發(fā)起請(qǐng)求的 URL 一致，如 http://www.example.com/user/id。如果后端缺少對(duì) /user/id 的路由處理，將返回 404 錯(cuò)誤。

不過(guò)這種模式要玩好，還需要后臺(tái)配置支持……所以呢，你要在服務(wù)端增加一個(gè)覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態(tài)資源，則應(yīng)該返回同一個(gè) index.html 頁(yè)面，這個(gè)頁(yè)面就是你 app 依賴(lài)的頁(yè)面。- Vue-Router

問(wèn)題起因

在做「年度賬單」項(xiàng)目的時(shí)候，項(xiàng)目部署的時(shí)候，用的是 hash 模式。APP安卓端分享出去的鏈接對(duì)于 # 做了特殊處理，encode 轉(zhuǎn)義成了 %23，所以路由只能換成 history 的模式。

因此，現(xiàn)把解決的思路總結(jié)下，雖然 官網(wǎng) 上給出了解決方案，但在實(shí)際的編碼中也遇到了一些問(wèn)題。

根目錄下

當(dāng)項(xiàng)目在根目錄下部署的時(shí)候（如 http://www.example.com/）,vue 的相關(guān)文件默認(rèn)不需要修改，修改的是后端，這里以 nginx 為例。

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

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線(xiàn)，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。

當(dāng)前題目：詳解Vue項(xiàng)目部署遇到的問(wèn)題及解決方案-創(chuàng)新互聯(lián)
文章源于：http://weahome.cn/article/dgsjgs.html