vue-cli中的圖片資源存放位置詳解
vue-cli圖片資源存放位置
vue-cli3.0有兩個(gè)放置靜態(tài)資源的目錄分別是public和assets。
1. public文件夾 - 引用(以/開(kāi)頭)
background-image: url('/search2.png');2. assets文件夾 - 引用（./或@/開(kāi)頭）
<img src="@/assets/logo.png" alt="">
1. public放不會(huì)變動(dòng)的文件
public/ 目錄下的文件并不會(huì)被Webpack處理：它們會(huì)直接被復(fù)制到最終的打包目錄（默認(rèn)是dist/static）下。必須使用絕對(duì)路徑引用這些文件，這個(gè)取決于你vue.config.js中publicPath的配置，默認(rèn)的是/。public建議放一些外部第三方，自己的文件放在assets，別人的放public中。
2. assets放可能會(huì)變動(dòng)的文件。
assets目錄中的文件會(huì)被webpack處理解析為模塊依賴(lài)，只支持相對(duì)路徑形式。
簡(jiǎn)單來(lái)說(shuō)就是就是public放別人家js文件（也就是不會(huì)變動(dòng)），assets放自己寫(xiě)的js文件（需要改動(dòng)文件）若把圖片放在assets和public中，html頁(yè)面都可以使用，但是在動(dòng)態(tài)綁定中，assets路徑的圖片加載失?。ㄒ?yàn)閣ebpack使用的是commenJS規(guī)范，必須使用require才可以。）
vue-cli圖片和第三方資源放的地方
assets下
將圖片和第三方文件放入public文件夾下
1. 圖片：所有圖片可以放在public文件夾下面 但是不建議
2. jQuery 和 bootstrap
直接在 publix 下的 index.html 直接引入
3. css 文件 / icon 圖標(biāo) / 動(dòng)畫(huà)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue-Router進(jìn)階之滾動(dòng)行為詳解
本篇文章主要介紹了Vue-Router進(jìn)階之滾動(dòng)行為詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
這篇文章主要給大家介紹了關(guān)于Vue動(dòng)態(tài)組件和異步組件原理的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了vue中的按鈕綁定事件小案例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
Vue cli構(gòu)建及項(xiàng)目打包以及出現(xiàn)的問(wèn)題解決
這篇文章主要介紹了Vue cli構(gòu)建及項(xiàng)目打包以及出現(xiàn)的問(wèn)題解決，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
vue如何通過(guò)插槽組件之間數(shù)據(jù)傳遞
這篇文章主要介紹了vue如何通過(guò)插槽組件之間數(shù)據(jù)傳遞問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
這篇文章主要為大家詳細(xì)介紹了vue使用swiper.js重疊輪播組建樣式，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
本篇文章給大家分享了vue移動(dòng)端路由切換實(shí)例以及相關(guān)知識(shí)點(diǎn)，對(duì)此有興趣的朋友可以參考學(xué)習(xí)下。2018-05-05
用vue構(gòu)建多頁(yè)面應(yīng)用的示例代碼
這篇文章主要介紹了用vue構(gòu)建多頁(yè)面應(yīng)用的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
vue webpack打包后圖片路徑錯(cuò)誤的完美解決方法
這篇文章主要介紹了vue webpack打包后圖片路徑錯(cuò)誤的解決方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-12-12
為了解決加載組件中出現(xiàn)的報(bào)錯(cuò)、超時(shí)、狀態(tài)展示等問(wèn)題,可以使用?Vue?3?提供的異步組件（Async?Components）,它對(duì)于加載過(guò)程做了更細(xì)致的控制,這篇文章主要介紹了Vue?3?進(jìn)階用法之異步組件,需要的朋友可以參考下2024-04-04