vite 动态导入静态资源

内容来源：https://www.jb51.net/javascript/35178695n.htm

1. 方案一：new URL 动态路径转换

通过 new URL 拼接路径，Vite 自动处理资源引用：

1 2 3

const pathKey = `../assets/${val}.jpg`; const src = new URL(pathKey, import.meta.url); imgSrc.value = src.href;

原理与限制：

• Vite 会将路径转换为构建后的哈希 URL（如 _assets/1-abc123.jpg）。
• 限制：路径必须为静态字符串模板（如 `../assets/${val}.jpg`），不可使用完全动态变量（如 pathKey = '../assets/' + val + '.jpg'），否则构建时无法解析。

2. 方案二：import() 动态导入

使用 import() 语法按需加载资源：

1 2 3

import(`../assets/${val}.jpg`).then((res) => {   imgSrc.value = res.default; });

特性：

• 构建时，Vite 会分析 ../assets/ 下的所有 .jpg 文件，生成对应 chunk。
• 问题：若 val 的取值在构建时无法确定（如用户输入），可能导致资源缺失。

3. 方案三：import.meta.glob 批量预加载

通过 Glob 模式预加载所有匹配资源，运行时按需获取：

1 2 3 4 5 6 7

// 预加载所有 jpg 文件（构建时生成映射表） const srcs = import.meta.glob("../assets/*.jpg", { as: "url" }); // 运行时动态获取 const pathKey = `../assets/${val}.jpg`; const url = await srcs[pathKey](); imgSrc.value = url;

优势：

• 构建时生成所有资源的 URL 映射表，避免运行时路径不确定性。
• { as: 'url' } 表示直接返回资源 URL，无需手动处理 default 属性。