Vue中如何在mounted生命周期钩子中加载assets目录下的本地字体

云上老周

2026-10-2

在Vue mounted生命周期中加载本地字体的实现方案

你现有代码中FontFace的URL参数使用了~@/路径别名，该别名仅会在CSS文件解析阶段被构建工具处理，JS逻辑中直接写入不会被编译转换，会导致字体文件路径无法被正确识别，加载失败。

以下是不同构建环境下的适配方案：

Vite 构建环境适配代码：

mounted () {
  // 调用Vite静态资源解析API获取字体的真实可访问路径
  const fontPath = new URL('@/assets/Fonts/AdobeArabicRegular/AdobeArabicRegular.ttf', import.meta.url).href
  const myFont = new FontFace('adobe-arabic', `url(${fontPath})`);

  myFont.load().then((font) => {
    document.fonts.add(font);
    console.log('字体加载完成，可正常使用');
    // 此处可插入依赖该字体的业务逻辑，如Canvas绘图、特殊文本渲染等
  }).catch(err => {
    console.error('字体加载失败：', err)
  })
}

Vue CLI（Webpack）构建环境适配代码：

mounted () {
  // 调用webpack资源解析能力获取字体路径
  const fontPath = require('@/assets/Fonts/AdobeArabicRegular/AdobeArabicRegular.ttf')
  const myFont = new FontFace('adobe-arabic', `url(${fontPath})`);

  myFont.load().then((font) => {
    document.fonts.add(font);
    console.log('字体加载完成，可正常使用');
  }).catch(err => {
    console.error('字体加载失败：', err)
  })
}