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