解決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ò)，但是頁(yè)面一片空白。此前也這樣發(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è)客戶端應(yīng)用，如果后臺(tái)沒有正確的配置，當(dāng)用戶在瀏覽器直接訪問 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)聽的路徑還是”/”與”/component”，自然路徑匹配不上。
所以我們需要修改routes，給每個(gè)path加上項(xiàng)目名，即”/vue-demo”，同時(shí)為了保證資源文件正確加載，打包時(shí)的 publicPath 也需要加上”/vue-demo”。
完畢！！
以上這篇解決vue+webpack打包路徑的問題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3中的toRef和toRefs的區(qū)別和用法示例小結(jié)
toRef和toRefs可以用來復(fù)制reactive里面的屬性然后轉(zhuǎn)成 ref,它保留了響應(yīng)式,也保留了引用,也就是你從 reactive 復(fù)制過來的屬性進(jìn)行修改后,除了視圖會(huì)更新,原有 ractive 里面對(duì)應(yīng)的值也會(huì)跟著更新,本文介紹Vue3中toRef和toRefs的區(qū)別和用法,需要的朋友可以參考下2024-08-08
前端項(xiàng)目vue3/React如何使用pako庫(kù)解壓縮后端返回gzip數(shù)據(jù)
pako是一個(gè)流行的JS庫(kù),用于在瀏覽器中進(jìn)行數(shù)據(jù)壓縮和解壓縮操作,它提供了對(duì)常見的壓縮算法的實(shí)現(xiàn),使開發(fā)者能夠在客戶端上輕松進(jìn)行數(shù)據(jù)壓縮和解壓縮,這篇文章主要介紹了前端項(xiàng)目vue3/React使用pako庫(kù)解壓縮后端返回gzip數(shù)據(jù),需要的朋友可以參考下2024-07-07
html2canvas.js是一款可以在網(wǎng)頁(yè)上實(shí)現(xiàn)頁(yè)面截圖的js,它使用了html5和css3的一些新功能特性,實(shí)現(xiàn)了在客戶端對(duì)網(wǎng)頁(yè)進(jìn)行截圖的功能,這篇文章主要給大家介紹了關(guān)于html2canvas使用的相關(guān)資料,需要的朋友可以參考下2024-03-03
在微信小程序中，可以使用全局配置和使用開發(fā)、體驗(yàn)、生產(chǎn)環(huán)境的地址，這篇文章主要介紹了Vue微信和uniapp配置環(huán)境地址,需要的朋友可以參考下2023-07-07
vue2.0/3.0中provide和inject的用法示例
provide和inject是成對(duì)出現(xiàn)的,主要用于父組件向子孫組件傳遞數(shù)據(jù),這篇文章主要給大家介紹了關(guān)于vue2.0/3.0中provide和inject用法的相關(guān)資料,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了Vue.js 加入高德地圖的實(shí)現(xiàn)方法,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
這篇文章主要詳細(xì)介紹了在vue3中如何選取頭像并裁剪，文章中有詳細(xì)的代碼示例，需要的朋友可以參考閱讀2023-04-04
vue3使用element-plus搭建后臺(tái)管理系統(tǒng)之菜單管理功能
這篇文章主要介紹了vue3使用element-plus搭建后臺(tái)管理系統(tǒng)之菜單管理,使用element-plus el-tree組件快速開發(fā)樹形菜單結(jié)構(gòu)，el-tree組件中filter-node-method事件便可以實(shí)現(xiàn)樹形菜單篩選過濾功能，需要的朋友可以參考下2022-04-04
解決echarts echarts數(shù)據(jù)動(dòng)態(tài)更新和dataZoom被重置問題
這篇文章主要介紹了解決echarts echarts數(shù)據(jù)動(dòng)態(tài)更新和dataZoom被重置問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
下面小編就為大家分享一篇基于Vuex無(wú)法觀察到值變化的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03