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