vue-cli中的圖片資源存放位置詳解
vue-cli圖片資源存放位置
vue-cli3.0有兩個放置靜態(tài)資源的目錄分別是public和assets。
1. public文件夾 - 引用(以/開頭)
background-image: url('/search2.png');2. assets文件夾 - 引用（./或@/開頭）
<img src="@/assets/logo.png" alt="">
1. public放不會變動的文件
public/ 目錄下的文件并不會被Webpack處理：它們會直接被復(fù)制到最終的打包目錄（默認(rèn)是dist/static）下。必須使用絕對路徑引用這些文件，這個取決于你vue.config.js中publicPath的配置，默認(rèn)的是/。public建議放一些外部第三方，自己的文件放在assets，別人的放public中。
2. assets放可能會變動的文件。
assets目錄中的文件會被webpack處理解析為模塊依賴，只支持相對路徑形式。
簡單來說就是就是public放別人家js文件（也就是不會變動），assets放自己寫的js文件（需要改動文件）若把圖片放在assets和public中，html頁面都可以使用，但是在動態(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) / 動畫
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue中使用v-model雙向數(shù)據(jù)綁定select、checked等多種表單元素的方法
?v-model?指令可以用在表單?input、textarea?及?select?元素上創(chuàng)建雙向數(shù)據(jù)綁定,它會根據(jù)控件類型自動選取正確的方法來更新元素,本文給大家介紹Vue中如何使用v-model雙向數(shù)據(jù)綁定select、checked等多種表單元素,感興趣的朋友一起看看吧2023-10-10
本文通過實(shí)例代碼給大家介紹Vue IP地址輸入框?qū)崿F(xiàn),代碼簡單易懂,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-10-10
element-ui 表格實(shí)現(xiàn)單元格可編輯的示例
下面小編就為大家分享一篇element-ui 表格實(shí)現(xiàn)單元格可編輯的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
vue結(jié)合Axios+v-for列表循環(huán)實(shí)現(xiàn)網(wǎng)易健康頁面(實(shí)例代碼)
這篇文章主要介紹了vue結(jié)合Axios+v-for列表循環(huán)實(shí)現(xiàn)網(wǎng)易健康頁面,在項(xiàng)目下安裝axios，通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-03-03
axios 是一個基于promise的HTTP庫,支持promise所有的API,本文給大家介紹Vue3全局配置Axios并解決跨域請求問題,內(nèi)容從axios部署開始到解決跨域問題,感興趣的朋友一起看看吧2023-11-11
element?tab標(biāo)簽管理路由頁面的項(xiàng)目實(shí)踐
本文主要介紹了element?tab標(biāo)簽管理路由頁面的項(xiàng)目實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
在vue項(xiàng)目中使用codemirror插件實(shí)現(xiàn)代碼編輯器功能
這篇文章主要介紹了在vue項(xiàng)目中使用codemirror插件實(shí)現(xiàn)代碼編輯器功能（代碼高亮顯示及自動提示）,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-08-08
vue3項(xiàng)目+element-plus:時間選擇器格式化方式
這篇文章主要介紹了vue3項(xiàng)目+element-plus:時間選擇器格式化方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要給大家介紹了關(guān)于vue解決跨域問題的幾種方式,跨域跨域報(bào)錯是前端開發(fā)中非常經(jīng)典的一個錯誤,文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
這篇文章主要介紹了vue如何動態(tài)生成andv圖標(biāo)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10