vue項(xiàng)目中圖片選擇路徑位置static或assets的區(qū)別及說(shuō)明
vue圖片選擇路徑位置static或assets區(qū)別
用vuecli的話(huà)默認(rèn)情況下 static 中的文件不會(huì)經(jīng)過(guò) webpack 相關(guān) loader 處理
assets里面的圖片是會(huì)經(jīng)過(guò) webpack 的 loader 處理的，而 static 里面的圖片是被直接復(fù)制到 dist/static 下面的。
一般是把一些小圖片放在 assets 里面，這樣一些小圖片就可以處理成 base64 了，或者全放在 assets 下面都可以。
相同點(diǎn)
assets和static兩個(gè)都是存放靜態(tài)資源文件。項(xiàng)目中所需要的資源文件圖片，字體圖標(biāo)，樣式文件等都可以放在這兩個(gè)文件下。
不相同點(diǎn)
assets中存放的靜態(tài)資源文件在項(xiàng)目打包時(shí)，也就是運(yùn)行npm run build時(shí)會(huì)將assets中放置的靜態(tài)資源文件進(jìn)行打包上傳，所謂打包簡(jiǎn)單點(diǎn)可以理解為壓縮體積，代碼格式化。而壓縮后的靜態(tài)資源文件最終也都會(huì)放置在static文件中跟著index.html一同上傳至服務(wù)器
static中放置的靜態(tài)資源文件就不會(huì)要走打包壓縮格式化等流程，而是直接進(jìn)入打包好的目錄，直接上傳至服務(wù)器。因?yàn)楸苊饬藟嚎s直接進(jìn)行上傳，在打包時(shí)會(huì)提高一定的效率，但是static中的資源文件由于沒(méi)有進(jìn)行壓縮等操作，所以文件的體積也就相對(duì)于assets中打包后的文件提交較大點(diǎn)。在服務(wù)器中就會(huì)占據(jù)更大的空間。所以簡(jiǎn)單點(diǎn)使用建議如下：
將項(xiàng)目中template需要的css文件js文件等都可以放置在assets中，走打包這一流程。減少體積。而項(xiàng)目中引入的第三方的資源文件如iconfoont.css等文件可以放置在static中，因?yàn)檫@些引入的第三方文件已經(jīng)經(jīng)過(guò)處理，我們不再需要處理，直接上傳。
vue之a(chǎn)ssets下的圖片路徑
<el-image :src="require('../assets/logo.png')" class="imgsign" ></el-image>如果想要加載在assets文件下的圖片，需使用require（’ …’）的形式，且須使用 :src
:src
static文件下的圖片不需要。
vue無(wú)法識(shí)別require，執(zhí)行一下命令即可：
npm install @types/node --save-dev
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
el-table-column 內(nèi)容不自動(dòng)換行的解決方法
本文主要介紹了el-table-column 內(nèi)容不自動(dòng)換行的解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
Vue表單數(shù)據(jù)修改與刪除功能實(shí)現(xiàn)
本文通過(guò)實(shí)例代碼介紹了Vue表單數(shù)據(jù)修改與刪除功能實(shí)現(xiàn),結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友跟隨小編一起看看吧2023-10-10
vue+bpmn.js實(shí)現(xiàn)自定義流程圖的完整代碼
這篇文章主要介紹了vue+bpmn.js實(shí)現(xiàn)自定義流程圖的完整代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借價(jià)值,需要的朋友參考下吧2024-03-03
vue實(shí)現(xiàn)一個(gè)6個(gè)輸入框的驗(yàn)證碼輸入組件功能的實(shí)例代碼
這篇文章主要介紹了vue實(shí)現(xiàn)一個(gè)6個(gè)輸入框的驗(yàn)證碼輸入組件功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06
解決vue創(chuàng)建項(xiàng)目使用vue-router和vuex報(bào)錯(cuò)Object(...)is not a&nb
這篇文章主要介紹了解決vue創(chuàng)建項(xiàng)目使用vue-router和vuex報(bào)錯(cuò)Object(...)is not a function問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
這篇文章主要介紹了10分鐘教你快速上手Vue3中新增的API,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-09-09
這篇文章主要介紹了vue中v-show和v-if的異同 ，通過(guò)代碼詳解v-show用法，本文給大家介紹的非常詳細(xì)具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
解決vue?vite啟動(dòng)項(xiàng)目報(bào)錯(cuò)ERROR:?Unexpected?“\x88“?in?JSON?的問(wèn)題
這篇文章主要介紹了vue?vite啟動(dòng)項(xiàng)目報(bào)錯(cuò)ERROR:?Unexpected?“\x88“?in?JSON?原因,本文給出出現(xiàn)此類(lèi)問(wèn)題的原因所在并給出解決方法，需要的朋友可以參考下2022-09-09
Vue2.X和Vue3.0數(shù)據(jù)響應(yīng)原理變化的區(qū)別
這篇文章主要介紹了Vue2.X和Vue3.0數(shù)據(jù)響應(yīng)原理變化的區(qū)別，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
vue 組件中使用 transition 和 transition-group實(shí)現(xiàn)過(guò)渡動(dòng)畫(huà)
本文給大家分享一下vue 組件中使用 transition 和 transition-group 設(shè)置過(guò)渡動(dòng)畫(huà),總結(jié)來(lái)說(shuō)可分為分為 name 版, js 鉤子操作類(lèi)名版, js 鉤子操作行內(nèi)樣式版，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2019-07-07