Vue.js CLI项目本地字体无法加载问题求助

我帮你梳理下排查这个字体加载问题的几个关键点，你可以一步步核对：

• 检查@font-face的src路径与格式是否正确
  在Vue的SCSS中引用assets目录下的字体，路径写法很容易出错。建议使用Webpack配置的别名~@来指向src目录，避免组件层级带来的相对路径混乱。同时要确保format属性和字体格式匹配（otf对应opentype）。示例代码：

  @font-face {
    font-family: "Gilroy";
    src: url('~@/assets/fonts/Radomir Tinkov - Gilroy-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
  }
  

• 核对Webpack的url-loader配置完整性
  你给出的配置代码缺少闭合括号，完整的配置应该是这样的：

  {
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
    }
  }
  

  这里要确认utils.assetsPath处理后的输出路径（默认Vue模板中会指向dist/static/fonts/）。另外，limit:10000意味着超过10KB的字体会被file-loader输出为独立文件，而非转成base64，要确保输出后的文件路径能被页面正确访问。

• 排查文件名与大小写问题
  你的字体文件名包含空格和特殊字符：Radomir Tinkov - Gilroy-Regular.otf，虽然Webpack理论上支持，但这类文件名可能在部分服务器环境或编码场景下导致加载失败。建议简化文件名（比如改为Gilroy-Regular.otf），并同步修改@font-face中的路径，减少潜在问题。

• 验证构建输出与路径可访问性
  执行npm run build后，检查dist/static/fonts/目录是否生成了对应的字体文件：

  • 如果没有生成：说明Webpack未识别到字体引用，大概率是@font-face的路径写错了，导致字体未被纳入构建流程。
  • 如果已生成：打开index.html查看字体的引用路径，然后在浏览器中直接访问该路径（比如http://localhost:8080/static/fonts/Gilroy-Regular.xxxx.otf），如果无法下载字体，说明路径配置存在问题。

• 开发环境的publicPath配置检查
  若在npm run dev时加载失败，要确认webpack.dev.conf.js中的publicPath是否为'/'（默认配置），确保字体的请求路径是根路径下的/fonts/开头，能被开发服务器正确解析。

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