Vue CLI 3配置相对URL时本地字体路径错误问题求助

阿华AIGC实验室

2026-5-21

解决Vue CLI 3生产环境相对URL配置导致字体路径错误的问题

我之前也碰到过类似的情况，你的配置方向是对的，但几个细节没处理到位，才引发了字体路径的问题。咱们一步步来修正：

1. 简化`vue.config.js`的publicPath配置

你现在通过configureWebpack修改output.publicPath的方式有点绕，Vue CLI 3本身提供了专门的publicPath选项，直接用它更规范，还能避免一些路径解析的歧义：

// vue.config.js
module.exports = {
  lintOnSave: false,
  // 根据环境切换publicPath，生产环境用当前目录相对路径
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/'
}

之前你用空字符串''作为生产环境的publicPath，这会让webpack解析路径时出现混淆，换成'./'才是标准的相对路径写法。

2. 检查字体文件的引用路径

确认你项目中CSS里引用字体的代码用的是相对路径，比如：

/* 示例：假设css文件在src/assets/css，字体在src/assets/fonts */
@font-face {
  font-family: 'CustomFont';
  src: url('../fonts/custom-font.ttf') format('truetype');
}

别用绝对路径/fonts/custom-font.ttf，因为生产环境是相对路径部署，绝对路径会从域名根目录找文件，而非当前项目所在的子目录。

3. 配置CSS提取插件的publicPath（关键补充）

如果前两步做完还是有问题，大概率是Vue CLI使用的mini-css-extract-plugin在提取CSS文件时，没正确设置字体资源的相对路径。可以在vue.config.js里专门配置CSS的提取选项：

// vue.config.js
module.exports = {
  lintOnSave: false,
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
  css: {
    extract: {
      // 确保CSS中引用的资源（比如字体）路径以当前CSS文件所在目录为基准
      publicPath: './'
    }
  }
}

这个配置会告诉CSS提取插件，所有CSS里的资源引用都按相对CSS文件的路径来解析。