最近寫(xiě)了一個(gè)vue小項(xiàng)目，不想單獨(dú)作為一個(gè)web項(xiàng)目發(fā)布，所以就準(zhǔn)備放到資源項(xiàng)目的public文件夾下，遇到一些小問(wèn)題，在此總結(jié)一下。

資源路徑如下：

public目錄配置的訪問(wèn)路徑為”/”，在這樣的情況下，我們的訪問(wèn)路徑就變成了”域名/vue-demo”。訪問(wèn)的時(shí)候發(fā)下程序未報(bào)錯(cuò)，但是頁(yè)面一片空白。此前也這樣發(fā)布的項(xiàng)目都沒(méi)有問(wèn)題，但這次是怎么回事呢？

仔細(xì)探索后發(fā)現(xiàn)是vue-router搞得鬼。因項(xiàng)目需要，所以使用了滾動(dòng)行為，滾動(dòng)行為必須開(kāi)啟history模式，在vue-router官方文檔中有這么一句話：

當(dāng)你使用 history 模式時(shí)，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！

不過(guò)這種模式要玩好，還需要后臺(tái)配置支持。因?yàn)槲覀兊膽?yīng)用是個(gè)單頁(yè)客戶端應(yīng)用，如果后臺(tái)沒(méi)有正確的配置，當(dāng)用戶在瀏覽器直接訪問(wèn) http://oursite.com/user/id 就會(huì)返回 404，這就不好看了。

所以呢，你要在服務(wù)端增加一個(gè)覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態(tài)資源，則應(yīng)該返回同一個(gè) index.html 頁(yè)面，這個(gè)頁(yè)面就是你 app 依賴的頁(yè)面。

而我們vue-router監(jiān)聽(tīng)的路徑還是”/”與”/component”，自然路徑匹配不上。

所以我們需要修改routes，給每個(gè)path加上項(xiàng)目名，即”/vue-demo”，同時(shí)為了保證資源文件正確加載，打包時(shí)的 publicPath 也需要加上”/vue-demo”。

完畢??！

以上這篇解決vue+webpack打包路徑的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持武林網(wǎng)。