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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue2.0使用Sortable.js實現(xiàn)的拖拽功能示例
本篇文章主要介紹了vue2.0使用Sortable.js實現(xiàn)的拖拽功能示例，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-02-02
簡單的vue-resourse獲取json并應(yīng)用到模板示例
本篇文章主要介紹了簡單的vue-resourse獲取json并應(yīng)用到模板示例，非常具有實用價值，需要的朋友可以參考下。2017-02-02
Vue全局注冊中的kebab-case和PascalCase用法
這篇文章主要介紹了Vue全局注冊中的kebab-case和PascalCase用法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了Vue3 源碼導(dǎo)讀(推薦)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
這篇文章主要介紹了vue使用swiper插件實現(xiàn)輪播圖的示例，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-05-05
VueJS 組件參數(shù)名命名與組件屬性轉(zhuǎn)化問題
這篇文章主要介紹了VueJS 組件參數(shù)名命名與組件屬性轉(zhuǎn)化問題，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-12-12
這篇文章主要為大家詳細(xì)介紹了vue調(diào)用語音播放的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
最近在使用vue的時候,遇到一個需求,實現(xiàn)左右div可通過中間部分拖拽調(diào)整寬度，本文就整理一下，分享給大家，有興趣的可以學(xué)習(xí)2021-06-06
解決vue.js this.$router.push無效的問題
今天小編就為大家分享一篇解決vue.js this.$router.push無效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue如何把組件方法暴露到window對象中，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09