欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue項(xiàng)目中圖片選擇路徑位置static或assets的區(qū)別及說明

 更新時(shí)間:2022年09月01日 09:16:54   作者:船長在船上  
這篇文章主要介紹了vue項(xiàng)目中圖片選擇路徑位置static或assets的區(qū)別及說明,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue圖片選擇路徑位置static或assets區(qū)別

用vuecli的話默認(rèn)情況下 static 中的文件不會經(jīng)過 webpack 相關(guān) loader 處理

assets里面的圖片是會經(jīng)過 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í)會將assets中放置的靜態(tài)資源文件進(jìn)行打包上傳,所謂打包簡單點(diǎn)可以理解為壓縮體積,代碼格式化。而壓縮后的靜態(tài)資源文件最終也都會放置在static文件中跟著index.html一同上傳至服務(wù)器

static中放置的靜態(tài)資源文件就不會要走打包壓縮格式化等流程,而是直接進(jìn)入打包好的目錄,直接上傳至服務(wù)器。因?yàn)楸苊饬藟嚎s直接進(jìn)行上傳,在打包時(shí)會提高一定的效率,但是static中的資源文件由于沒有進(jìn)行壓縮等操作,所以文件的體積也就相對于assets中打包后的文件提交較大點(diǎn)。在服務(wù)器中就會占據(jù)更大的空間。所以簡單點(diǎn)使用建議如下:

將項(xiàng)目中template需要的css文件js文件等都可以放置在assets中,走打包這一流程。減少體積。而項(xiàng)目中引入的第三方的資源文件如iconfoont.css等文件可以放置在static中,因?yàn)檫@些引入的第三方文件已經(jīng)經(jīng)過處理,我們不再需要處理,直接上傳。

vue之a(chǎn)ssets下的圖片路徑

<el-image :src="require('../assets/logo.png')" class="imgsign" ></el-image>

如果想要加載在assets文件下的圖片,需使用require(’ …’)的形式,且須使用 :src

:src

static文件下的圖片不需要。

vue無法識別require,執(zhí)行一下命令即可:

npm install @types/node --save-dev

以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。

相關(guān)文章

最新評論