Vue3+Vite使用Font Loading API从assets加载字体出现404错误

云上老周

2026-8-25

Vue 3 + Vite 动态加载字体404问题解决

问题原因

你用import.meta.glob('@/assets/fonts/*.otf')获取的是模块加载函数，不是资源的实际访问URL。直接使用循环里的path（如@/assets/fonts/xxx.otf）作为请求路径时，浏览器会直接请求这个原始路径，但Vite打包后资源会被哈希重命名，原路径不存在，因此触发404错误。

修复代码

方式1：同步加载（推荐，适合字体数量不多的场景）

const fonts = import.meta.glob('@/assets/fonts/*.otf', { eager: true, as: 'url' })

async function loadFonts() {
  for (const [path, fontUrl] of Object.entries(fonts)) {
    const fontName = path.split('/')[3].split('-')[0]
    const myFont = new FontFace(fontName, `url('${fontUrl}')`)
    await myFont.load()
    document.fonts.add(myFont)
  }
}

loadFonts()

方式2：异步加载

const fonts = import.meta.glob('@/assets/fonts/*.otf', { as: 'url' })

async function loadFonts() {
  for (const [path, getFontUrl] of Object.entries(fonts)) {
    const fontName = path.split('/')[3].split('-')[0]
    const fontUrl = await getFontUrl()
    const myFont = new FontFace(fontName, `url('${fontUrl}')`)
    await myFont.load()
    document.fonts.add(myFont)
  }
}

loadFonts()

关键说明

{ as: 'url' }：告诉Vite将字体文件处理为可直接访问的URL字符串，而非模块。
{ eager: true }：让Vite在启动时就加载所有匹配的字体资源，无需异步调用加载函数；如果不需要预加载，可去掉该选项，改用异步调用getFontUrl()获取URL。
字体名称提取逻辑保持你原有代码的逻辑，确保和字体文件命名规则匹配即可。