uniapp+Vue3+Vite 实现动态访问静态图片（含微信小程序端）

前言：在最近新起的项目中，用到了较新uniapp+vue3.2+vite，Vite的特性和 webpack 不一样 ，所以require 将不能使用 。

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

  通过require动态引入， 发现报错：require is not defind，这是因为 require 是属于 Webpack 的方法

 第一种方式（适用于单个资源文件）

import homeBg from '/src/static/images/home/home_bg.png'
 
<img :src="homeBg" />

 第二种方式（适用于多个资源文件，动态传入文件路径，不适用小程序端）

  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用法
})

 在微信小程序端调试了一下，因为new url相当于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
 * 该方法匹配到的文件默认是懒加载，通过动态导入实现，构建时会分离独立的 chunk，
是异步导入，返回的是 Promise
 * /*import.meta.globEager
 * 该方法是直接导入所有模块，并且是同步导入，返回结果直接通过 for...in循环就可以操作*/

 使用background-image背景图属性引入

1.官方文档说：支持 dase64 格式图片。 支持网络路径图片。40kb以下小图片推荐使用以 ~@ 开头的绝对路径；大图片推荐使用网络地址 。微信小程序不支持相对路径（真机不支持，开发工具支持） 

/* 推荐~@绝对路径引入 */
background-image: url("~@/static/images/home/home_bg.png");