前言：在最近新起的項(xiàng)目中，用到了較新uniapp+vue3.2+vite，Vite的特性和 webpack 不一樣 ，所以require 將不能使用 。

<img :src="require('@/static/images/home/home_bg.png')" />

通過require動(dòng)態(tài)引入， 發(fā)現(xiàn)報(bào)錯(cuò)：require is not defind，這是因?yàn)?require 是屬于 Webpack 的方法

第一種方式（適用于單個(gè)資源文件）

import homeBg from '/src/static/images/home/home_bg.png'

<img :src="homeBg" />

第二種方式（適用于多個(gè)資源文件，動(dòng)態(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)試了一下，因?yàn)閚ew url相當(dāng)于window.location.href，以至于小程序里是無法使用的~~~~

第三種方式（適用于多個(gè)資源文件，這種方式引入的文件必須指定到具體文件夾路徑，傳入的變量中只能為文件名，不能包含文件路徑，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)是懶加載，通過動(dòng)態(tài)導(dǎo)入實(shí)現(xiàn)，構(gòu)建時(shí)會(huì)分離獨(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以下小圖片推薦使用以 ~@ 開頭的絕對(duì)路徑；大圖片推薦使用網(wǎng)絡(luò)地址 。微信小程序不支持相對(duì)路徑（真機(jī)不支持，開發(fā)工具支持）

/* 推薦~@絕對(duì)路徑引入 */
background-image: url("~@/static/images/home/home_bg.png");