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