vue項(xiàng)目中圖片選擇路徑位置static或assets的區(qū)別及說明
vue圖片選擇路徑位置static或assets區(qū)別
用vuecli的話默認(rèn)情況下 static 中的文件不會(huì)經(jīng)過 webpack 相關(guān) loader 處理
assets里面的圖片是會(huì)經(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í)會(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中的資源文件由于沒有進(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)過處理，我們不再需要處理，直接上傳。
vue之a(chǎn)ssets下的圖片路徑
<el-image :src="require('../assets/logo.png')" class="imgsign" ></el-image>如果想要加載在assets文件下的圖片，需使用require（’ …’）的形式，且須使用 :src
:src
static文件下的圖片不需要。
vue無法識(shí)別require，執(zhí)行一下命令即可：
npm install @types/node --save-dev
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了Yarn與Lerna管理monorepo的使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
vue構(gòu)建動(dòng)態(tài)表單的方法示例
這篇文章主要介紹了vue構(gòu)建動(dòng)態(tài)表單的方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
眾所周知，一個(gè)項(xiàng)目在開發(fā)、測(cè)試與生產(chǎn)環(huán)境的各種配置變量是不一樣的，但在vue cli 3中通過指令vue create xxx創(chuàng)建的項(xiàng)目取消了默認(rèn)的 config 和 build 文件夾，這導(dǎo)致剛?cè)胧值男』锇椴恢涝谀膬号渲铆h(huán)境變量，不過官方也提供了相應(yīng)的配置方法，本文就來介紹一下2021-08-08
這篇文章主要介紹了Vue2.x響應(yīng)式及簡(jiǎn)單的示例，應(yīng)用了簡(jiǎn)單的源代碼進(jìn)行講解，感興趣的小伙伴可以參考一下，希望可以幫助到你2021-08-08
這篇文章主要介紹了Vue如何引入全局過濾器問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了vue組件的相關(guān)資料，文中講解非常細(xì)致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
這篇文章主要給大家介紹了關(guān)于Vue中使用icon的幾種常用方法,icon圖標(biāo)的使用 Vue是現(xiàn)在前端最流行的框架之一,作為前端開發(fā)人員應(yīng)該要熟練的掌握它,需要的朋友可以參考下2023-07-07
在Vue3中實(shí)現(xiàn)動(dòng)態(tài)路由的示例代碼
Vue3中的動(dòng)態(tài)路由是一種高級(jí)功能,它允許你在URL中包含變量,這些變量可以在組件內(nèi)部通過$route.params對(duì)象訪問,動(dòng)態(tài)路由通常用于構(gòu)建可配置性強(qiáng)、更具靈活性的應(yīng)用,本文詳細(xì)介紹了如何在vue3中實(shí)現(xiàn)動(dòng)態(tài)路由,需要的朋友可以參考下2024-07-07
vue 使用 echarts 繪制中國地圖的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue 使用 echarts 繪制中國地圖,內(nèi)容包括插入echarts所需模塊及完整的代碼，代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-01-01
今天小編就為大家分享一篇Vue引用Swiper4插件無法重寫分頁器樣式的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09