VueJS 2 + Webpack 2自定义字体嵌入失败求助

别担心，刚接触Vue和Webpack遇到资源加载问题太正常了，我帮你梳理下问题点和解决步骤：

1. 修复字体文件路径错误 #

首先看你的_fonts.scss代码，其中有一条woff字体的路径写错了——漏掉了assets目录，这是导致控制台404报错的核心原因之一：

@font-face {
  font-family: 'HalisGR-Black';
  src: url('../assets/fonts/2E8332_1_0.eot');
  src: url('../assets/fonts/2E8332_1_0.eot?#iefix') format('embedded-opentype'),
       url('../assets/fonts/2E8332_1_0.woff2') format('woff2'),
       // 修正前：url('../fonts/2E8332_1_0.woff')
       url('../assets/fonts/2E8332_1_0.woff') format('woff'),
       url('../assets/fonts/2E8332_1_0.ttf') format('truetype');
}

2. 修正SCSS文件的导入路径 #

你的_global.scss和_fonts.scss都在src/assets/styles/目录下，属于同级文件，用相对路径导入更可靠，不需要写完整的绝对路径：

// 修正前：@import 'src/assets/styles/_fonts.scss';
@import './_fonts.scss';

h1, h2 {
  font-weight: bold;
  font-family: 'HalisGR-Black', Helvetica, Arial, sans-serif;
}

3. 确认Webpack配置的正确性 #

你的Webpack基础配置里已经正确配置了字体文件的loader，这部分没问题，它会自动处理字体文件的打包和路径解析：

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

最后验证步骤 #

• 保存所有修改的文件
• 重启开发服务器（Webpack Dev Server有时候需要重启才能识别路径变更）
• 打开浏览器控制台，检查是否还有404错误，同时查看页面元素的字体样式是否生效

这样应该就能顺利加载自定义字体了！

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