最近發現一個透過vue+webpack打包路徑的問題

下面我就為大家分享一篇解決vue webpack打包路徑的問題，具有很好的參考價值，希望對大家有幫助。

最近寫了一個vue小項目，不想單獨作為一個web項目發布，所以就準備放到資源項目的public資料夾下，遇到一些小問題，在此總結一下。

資源路徑如下：

#public目錄配置的存取路徑為”/”，在這樣的情況下，我們的存取路徑就變成了」網域/vue-demo」。訪問的時候發下程序未報錯，但是頁面一片空白。先前也這樣發布的項目都沒有問題，但這次是怎麼回事？

仔細探索後發現是vue-router搞鬼。因專案需要，所以使用了滾動行為，滾動行為必須開啟history模式，在vue-router官方文件中有這麼一句話：

##當你使用history 模式時，URL 就像正常的url，例如http://yoursite.com/user/id，也好看！

不過這種模式要玩好，還需要後台設定支援。因為我們的應用程式是單頁用戶端應用，如果後台沒有正確的配置，當使用者在瀏覽器直接造訪 http://oursite.com/user/id 就會回傳 404，這就不好看了。

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

而我們vue-router監聽的路徑還是”/”與”/component”，自然路徑不匹配。

所以我們需要修改routes，給每個path加上項目名，即”/vue-demo”，同時為了保證資源檔案正確加載，打包時的publicPath 也需要加上”/vue-demo 」。

完畢！ ！

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

如何透過JavaScript實現微訊號隨機切換程式碼（詳細教學）

利用ES6透過WeakMap解決記憶體洩漏問題（詳細教學）

使用vue element-ui ajax這幾樣技術，實作一個表格的實例

#

以上是最近發現一個透過vue+webpack打包路徑的問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！