vue-cli中打包圖片路徑錯(cuò)誤的解決方法
最近第一次使用vue-cli構(gòu)建項(xiàng)目，第一次打包部署到服務(wù)器上的時(shí)候出現(xiàn)圖片加載不出來(lái)，結(jié)合網(wǎng)上的方法，終于給摸索出來(lái)。將項(xiàng)目部署到服務(wù)器上分為兩種：一種是直接部署到服務(wù)器的根目錄，另外一種是部署到服務(wù)器的子目錄下
1.我們首先來(lái)說(shuō)部署到根目錄下 就是比如：www.****.com
找到項(xiàng)目中config文件夾下的index.js文件
將文件中的assetsPublicPath: '/',改成如下方框這樣。
這樣的目的是將絕對(duì)路徑改成相對(duì)路徑
如果放在根目錄下，這樣就可以了
2.放在子目錄下 如：www.***.com/community/dist
分為兩步 第一步和上面的一樣
如果你還用到路由的話，將router文件夾下的index文件，改成如下圖這樣
用npm run build命令打包完之后，就將dist文件放到community文件夾下，這樣圖片就可以顯示出來(lái)了。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文詳細(xì)解析了如何在Vue3中實(shí)現(xiàn)一個(gè)自動(dòng)根據(jù)設(shè)計(jì)寬度縮放并調(diào)整高度的響應(yīng)式組件,組件的核心功能包括設(shè)計(jì)寬度設(shè)定、動(dòng)態(tài)縮放比例計(jì)算和高度調(diào)整,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09
這篇文章主要為大家詳細(xì)介紹了vue2實(shí)現(xiàn)手勢(shì)密碼功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
關(guān)于vue利用postcss-pxtorem進(jìn)行移動(dòng)端適配的問(wèn)題
這篇文章主要介紹了關(guān)于vue利用postcss-pxtorem進(jìn)行移動(dòng)端適配的問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
詳解Vue中數(shù)組和對(duì)象更改后視圖不刷新的問(wèn)題
這篇文章主要介紹了Vue中數(shù)組和對(duì)象更改后視圖不刷新的問(wèn)題，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Ant Design Vue日期組件的時(shí)間限制方式
這篇文章主要介紹了Ant Design Vue日期組件的時(shí)間限制方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
vue.js單頁(yè)面應(yīng)用實(shí)例的簡(jiǎn)單實(shí)現(xiàn)
本篇文章主要介紹了vue.js單頁(yè)面應(yīng)用實(shí)例的簡(jiǎn)單實(shí)現(xiàn)，使用單頁(yè)應(yīng)用，沒(méi)有頁(yè)面切換，就沒(méi)有白屏阻塞，可以大大提高 H5 的性能，達(dá)到接近原生的流暢體驗(yàn)。2017-04-04
詳解vue2.0 資源文件assets和static的區(qū)別
這篇文章主要介紹了詳解vue2.0 資源文件assets和static的區(qū)別，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
Vue實(shí)現(xiàn)路由跳轉(zhuǎn)和嵌套
本篇文章主要介紹了Vue實(shí)現(xiàn)路由跳轉(zhuǎn)和嵌套，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
本文章通過(guò)實(shí)現(xiàn)一個(gè)vue-dialog的彈出層組件，然后附加說(shuō)明如果發(fā)布此包到npm，且能被其他項(xiàng)目使用。本文給大家介紹的非常詳細(xì)，需要的的朋友參考下2017-03-03
vue-cli3項(xiàng)目打包后自動(dòng)化部署到服務(wù)器的方法
這篇文章主要介紹了vue-cli3項(xiàng)目打包后自動(dòng)化部署到服務(wù)器的方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-09-09