詳解Vue項目部署遇到的問題及解決方案-創(chuàng)新互聯(lián)
寫在前面
Vue-Router 有兩種模式，默認是 hash 模式，另外一種是 history 模式。
- hash：也就是地址欄里的 # 符號。比如 http://www.example/#/hello，hash 的值為 #/hello。特點：hash 雖然出現(xiàn) URL 中，但不會被包含在 HTTP 請求中，對后端不會產(chǎn)生什么影響，改變 URL 不會重載頁面。
- history：利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法，來完成 URL 跳轉(zhuǎn)而無須重新加載頁面。（需要特定瀏覽器支持）
hash 和 history 兩種模式都是基于瀏覽器自身的屬性，vue-router 只是利用了這兩個特性（底層還是瀏覽器提供的接口）來實現(xiàn)前端路由。
使用場景
一般來說，兩種模式都是可以的。除非在意不太漂亮的 #，只能選擇 history。
這兩種模式在開發(fā)環(huán)境下都沒有什么太大的問題，但是當部署到生產(chǎn)環(huán)境中后，兩者有所不同。
hash 模式部署沒有什么問題，只要訪問到服務器上的 index.html，就可以訪問網(wǎng)站了。
history 模式下，前端的 URL 必須和實際向后端發(fā)起請求的 URL 一致，如 http://www.example.com/user/id。如果后端缺少對 /user/id 的路由處理，將返回 404 錯誤。
不過這種模式要玩好，還需要后臺配置支持……所以呢，你要在服務端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態(tài)資源，則應該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面。- Vue-Router
問題起因
在做「年度賬單」項目的時候，項目部署的時候，用的是 hash 模式。APP安卓端分享出去的鏈接對于 # 做了特殊處理，encode 轉(zhuǎn)義成了 %23，所以路由只能換成 history 的模式。
因此，現(xiàn)把解決的思路總結(jié)下，雖然 官網(wǎng) 上給出了解決方案，但在實際的編碼中也遇到了一些問題。
根目錄下
當項目在根目錄下部署的時候（如 http://www.example.com/）,vue 的相關文件默認不需要修改，修改的是后端，這里以 nginx 為例。
location / {
try_files $uri $uri/ /index.html;
}
另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。
網(wǎng)站題目：詳解Vue項目部署遇到的問題及解決方案-創(chuàng)新互聯(lián)
當前URL：http://m.jiaotiyi.com/article/dgsjgs.html