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處理解析為模塊依賴，只支持相對(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中使用v-model雙向數(shù)據(jù)綁定select、checked等多種表單元素的方法
?v-model?指令可以用在表單?input、textarea?及?select?元素上創(chuàng)建雙向數(shù)據(jù)綁定,它會(huì)根據(jù)控件類型自動(dòng)選取正確的方法來(lái)更新元素,本文給大家介紹Vue中如何使用v-model雙向數(shù)據(jù)綁定select、checked等多種表單元素,感興趣的朋友一起看看吧2023-10-10
本文通過(guò)實(shí)例代碼給大家介紹Vue IP地址輸入框?qū)崿F(xiàn),代碼簡(jiǎn)單易懂,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-10-10
element-ui 表格實(shí)現(xiàn)單元格可編輯的示例
下面小編就為大家分享一篇element-ui 表格實(shí)現(xiàn)單元格可編輯的示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
vue結(jié)合Axios+v-for列表循環(huán)實(shí)現(xiàn)網(wǎng)易健康頁(yè)面(實(shí)例代碼)
這篇文章主要介紹了vue結(jié)合Axios+v-for列表循環(huán)實(shí)現(xiàn)網(wǎng)易健康頁(yè)面,在項(xiàng)目下安裝axios，通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-03-03
Vue3全局配置Axios并解決跨域請(qǐng)求問(wèn)題示例詳解
axios 是一個(gè)基于promise的HTTP庫(kù),支持promise所有的API,本文給大家介紹Vue3全局配置Axios并解決跨域請(qǐng)求問(wèn)題,內(nèi)容從axios部署開(kāi)始到解決跨域問(wèn)題,感興趣的朋友一起看看吧2023-11-11
element?tab標(biāo)簽管理路由頁(yè)面的項(xiàng)目實(shí)踐
本文主要介紹了element?tab標(biāo)簽管理路由頁(yè)面的項(xiàng)目實(shí)踐，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
在vue項(xiàng)目中使用codemirror插件實(shí)現(xiàn)代碼編輯器功能
這篇文章主要介紹了在vue項(xiàng)目中使用codemirror插件實(shí)現(xiàn)代碼編輯器功能（代碼高亮顯示及自動(dòng)提示）,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-08-08
vue3項(xiàng)目+element-plus:時(shí)間選擇器格式化方式
這篇文章主要介紹了vue3項(xiàng)目+element-plus:時(shí)間選擇器格式化方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要給大家介紹了關(guān)于vue解決跨域問(wèn)題的幾種方式,跨域跨域報(bào)錯(cuò)是前端開(kāi)發(fā)中非常經(jīng)典的一個(gè)錯(cuò)誤,文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
vue如何動(dòng)態(tài)生成andv圖標(biāo)
這篇文章主要介紹了vue如何動(dòng)態(tài)生成andv圖標(biāo)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10