[Vite]import.meta.glob批量引入svg图片
- 这只是一个 Vite 独有的功能而不是一个 Web 或 ES 标准
- 该 Glob 模式会被当成导入标识符:必须是相对路径(以
./
开头)或绝对路径(以/
开头,相对于项目根目录解析)。 - Glob 匹配是使用
fast-glob
来实现的 —— 阅读它的文档来查阅 支持的 Glob 模式。 - 你还需注意,glob 的导入不接受变量,你应直接传递字符串模式。
- glob 模式不能包含与包裹引号相同的引号字符串(其中包括
'
,"
,```),例如,如果你想实现'/Tom\'s files/**'
的效果,请使用"/Tom's files/**"
代替。
在webpack中,使用require.context如何自动导入组件
而在vite中,不支持使用require,应使用import.meta.globEager
实现自动化导入store中的模块;
导入图片
// 获取图片url
export const getImgUrl = (name, suffix = 'svg') => {
return new URL(`/src/assets/img/${name}.${suffix}`, import.meta.url).href;
};
// 获取状态->图片url的dict
function getStatusImgDict() {
const modules = import.meta.glob(`/src/assets/status/*.svg`);
Object.keys(modules).forEach(key => {
const newKey = getFileName(key);
// modules[newKey] = modules[key];
modules[newKey] = getImgUrl(newKey);
delete modules[key];
});
return modules;
}
// 状态->图片url的dict
const statusImgDict = getStatusImgDict();
// 根据传入的状态获取
function getStatusImg(status) {
return statusImgDict[status];
}