前言：在最近新起的項目中瓣俯，用到了較新uniapp+vue3.2+vite，Vite的特性和 webpack 不一樣 ，所以require 將不能使用 呆瞻。
<img :src="require('@/static/images/home/home_bg.png')" />
通過require動態(tài)引入， 發(fā)現(xiàn)報錯：require is not defind径玖，這是因為 require 是屬于 Webpack 的方法
第一種方式（適用于單個資源文件）
import homeBg from '/src/static/images/home/home_bg.png'
<img :src="homeBg" />
第二種方式（適用于多個資源文件痴脾，動態(tài)傳入文件路徑，不適用小程序端）
new URL() + import.meta.url
import { computed } from 'vue'
<img :src="getAssetsImages('home_bg')" />
let getAssetsImages = computed(() => (name, type = 'png') => {
return new URL(`/static/images/home/${name}.${type}`, import.meta.url).href; //h5用法
})
在微信小程序端調(diào)試了一下梳星，因為new url相當(dāng)于window.location.href赞赖，以至于小程序里是無法使用的~~~~
第三種方式（適用于多個資源文件，這種方式引入的文件必須指定到具體文件夾路徑冤灾，傳入的變量中只能為文件名前域，不能包含文件路徑，h5和微信小程序均適用）
import { computed } from 'vue'
<img :src="getAssetsImages('home_bg','jpg')" />
let getAssetsImages = computed(() => (name, type = 'png') => {
/**
* 獲取本地圖
* @param name // 文件名 如 home-bg
* @param type // 文件類型 如 png jpg
* @returns {*|string}
*/
const path = `/src/static/images/home/${name}.${type}`
const modules = import.meta.globEager('/src/static/images/home/*')
return modules[path].default
})
/*import.meta.glob
- 該方法匹配到的文件默認(rèn)是懶加載瞳购，通過動態(tài)導(dǎo)入實(shí)現(xiàn)话侄，構(gòu)建時會分離獨(dú)立的 chunk，
是異步導(dǎo)入学赛，返回的是 Promise- /*import.meta.globEager
- 該方法是直接導(dǎo)入所有模塊年堆，并且是同步導(dǎo)入，返回結(jié)果直接通過 for...in循環(huán)就可以操作*
使用background-image背景圖屬性引入
1.官方文檔說：支持 dase64 格式圖片盏浇。 支持網(wǎng)絡(luò)路徑圖片变丧。40kb以下小圖片推薦使用以 ~@ 開頭的絕對路徑；大圖片推薦使用網(wǎng)絡(luò)地址 绢掰。微信小程序不支持相對路徑（真機(jī)不支持痒蓬，開發(fā)工具支持）
/* 推薦~@絕對路徑引入 */
background-image: url("~@/static/images/home/home_bg.png");
