[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];
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27