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