首頁 > web前端 > js教程 > vue+webpack打包路徑有哪些問題

vue+webpack打包路徑有哪些問題

php中世界最好的语言
發布: 2018-03-28 09:47:19
原創
2166 人瀏覽過

這次帶給大家vue+webpack打包路徑有哪些問題,山西i安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 」。

完畢! !

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

vue打包後字體和圖片資源失效如何處理

webpack字體圖示無法顯示怎麼解決

#

以上是vue+webpack打包路徑有哪些問題的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板