Vite/Vue3如何借助路径查找动态引用静态资源并支持TS路径别名

问题核心原因 #

原生URL构造函数是浏览器标准API，本身不识别TS配置里的路径别名；Vite的静态资源解析逻辑也不会对URL参数里完全动态、包含别名标识的字符串做自动转换，直接写@/assets/xxx会导致@符号被保留到最终路径里，资源加载失败。同时原生URL构造不会校验目标资源是否真实存在，容易出现运行时404。

方案1：import.meta.glob（官方推荐，自带资源校验） #

这是Vite原生提供的静态资源批量处理能力，会在构建阶段扫描匹配路径下的所有文件，自动识别路径别名，同时会对不存在的资源直接抛出构建错误，从根源避免运行时404。

1. 首先预加载目标目录下的指定类型资源：

// 匹配@/assets下所有png文件，eager开启同步导入，直接返回资源URL
const assetMap = import.meta.glob('@/assets/*.png', {
  eager: true,
  import: 'default'
})

2. 封装统一的资源获取方法：

/**
 * 动态获取assets目录下的png资源地址
 * @param name 资源文件名（不含后缀）
 */
export const getPngAsset = (name: string) => {
  const assetUrl = assetMap[`/src/assets/${name}.png`]
  if (!assetUrl) throw new Error(`[资源错误] 未找到对应静态资源：${name}.png`)
  return assetUrl
}

// 业务中使用
const logoUrl = getPngAsset('logo')

注意事项：

• import.meta.glob的匹配规则必须保留固定的路径前缀、后缀，只有文件名部分可以动态传入，否则构建阶段无法完成静态扫描
• 匹配路径可以直接写@/开头的别名路径，Vite会自动读取别名配置解析
• 构建阶段会把所有匹配到的资源做哈希处理、打包到产物中，不需要手动处理路径转换

方案2：import.meta.resolve（写法更简洁） #

如果偏好接近原生URL的调用方式，可以用Vite增强过的import.meta.resolveAPI，该API支持解析配置好的路径别名。

1. 先确保Vite可识别TS里配置的路径别名，两种方式二选一：
   • 手动在vite.config.ts里同步配置和tsconfig一致的别名规则
   • 安装vite-tsconfig-paths插件自动读取tsconfig的paths配置，不需要手动重复写别名规则
2. 直接封装方法调用即可：

const getAssetUrl = (name: string) => {
  return import.meta.resolve(`@/assets/${name}.png`)
}

注意事项：

• 该方案同样要求路径保留固定前缀后缀，不支持完全无规律的动态路径
• 默认不会做资源存在性校验，需要自行加判断逻辑避免404
• 低版本Vite对该API的支持有差异，建议使用4.0+版本

不推荐的写法 #

直接在URL构造函数里写@开头的路径无法生效，因为Vite的构建转换逻辑不会处理这类原生API里的别名字符串，最终生成的路径会保留@符号，导致资源加载失败。

内容的提问来源于stack exchange，提问作者Zulan