解決vue+webpack打包路徑的問題
最近寫了一個vue小項目，不想單獨作為一個web項目發(fā)布，所以就準備放到資源項目的public文件夾下，遇到一些小問題，在此總結一下。
資源路徑如下：
public目錄配置的訪問路徑為”/”，在這樣的情況下，我們的訪問路徑就變成了”域名/vue-demo”。訪問的時候發(fā)下程序未報錯，但是頁面一片空白。此前也這樣發(fā)布的項目都沒有問題，但這次是怎么回事呢？
仔細探索后發(fā)現(xiàn)是vue-router搞得鬼。因項目需要，所以使用了滾動行為，滾動行為必須開啟history模式，在vue-router官方文檔中有這么一句話：
當你使用 history 模式時，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！
不過這種模式要玩好，還需要后臺配置支持。因為我們的應用是個單頁客戶端應用，如果后臺沒有正確的配置，當用戶在瀏覽器直接訪問 http://oursite.com/user/id 就會返回 404，這就不好看了。
所以呢，你要在服務端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態(tài)資源，則應該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面。
而我們vue-router監(jiān)聽的路徑還是”/”與”/component”，自然路徑匹配不上。
所以我們需要修改routes，給每個path加上項目名，即”/vue-demo”，同時為了保證資源文件正確加載，打包時的 publicPath 也需要加上”/vue-demo”。
完畢?。?/p>
以上這篇解決vue+webpack打包路徑的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
大家應該都知道vue是單向數(shù)據流，一般我們也不會在子組件里面修改父組件傳進來的值，但總有需要修改的時候，這篇文章主要介紹了vue中修改props傳進來的值,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了VUE預渲染及遇到的坑，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細介紹了Vue方法與事件處理器，,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了vue自定義組件如何添加使用原生事件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家介紹了如何利用Vue實現(xiàn)輸入框@功能，文中的示例代碼講解詳細，對我們學習Vue有一定的幫助，感興趣的可以學習一下2022-05-05
這篇文章主要為大家介紹了vue3 pinia踩坑及解決方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
關于vue?組件還是非常好用的,真正掌握預計需要一段時間,下面這篇文章主要給大家介紹了關于Vue3自動引入組件與組件庫的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-10-10
vue項目watch內的函數(shù)重復觸發(fā)問題的解決
這篇文章主要介紹了vue項目watch內的函數(shù)重復觸發(fā)問題的兩種解決方案，幫助大家更好的理解和學習使用vue，感興趣的朋友可以了解下2021-04-04
下面小編就為大家分享一篇vue中element組件樣式修改無效的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
本篇開始功能模塊的開發(fā)，首先完成ABP模板自帶的身份認證管理模塊和租戶管理模塊。同樣的，參考ABP的Angular版本來做。2021-05-05