Nuxt - _nuxt 文件夹未提供自定义图标字体

Question

我已成功使用 webfonts-loader 包为图标生成字体和类定义，但我的 nuxt 开发服务器不提供它。我脑子里有一个样式标签：

@font-face {
  font-family: "TopLoggerIcons";
  src: url("/myfont.eot?#iefix") format("embedded-opentype"), url("/myfont.woff2") format("woff2");
}

但是请求的http://localhost:3010/myfont.woff2 给出了 404。我在 2.0 之前（以及 webpack 4 之前）的 nuxt 版本中工作，该文件是从http://localhost:3010/_nuxt/myfont.woff2 提供的。当前也从那里提供字体，但是 font-face 声明中的路径是错误的。我想知道这里删除了路径中的（必需的？）_nuxt 部分发生了什么变化。

在我的nuxt.config.js 文件中，我有：

build: {
  extend(config, ctx) {
    config.module.rules.push({
      test: /plugins\/icons\.js$/,
      use: ['vue-style-loader', 'css-loader', 'webfonts-loader'],
    })
  },
}

现在根据 webfonts-loader 库中的示例，我需要使用 MiniCssExtractPlugin.loader 而不是 vue-style-loader，但这不起作用。我读到here 说它是nuxt 内部使用的，但我不知道如何在此处添加。

希望有人知道在哪里看...

Answer 1

好的，刚刚想通了：你必须使用 webfonts-loader 包的 publicPath 选项：

extend(config, ctx) {
  config.module.rules.push({
    test: /plugins\/icons\.js$/,
    use: [
      'vue-style-loader',
      'css-loader',
      { 
        loader: 'webfonts-loader',
        options: {
          publicPath: config.output.publicPath,
        },
      }
    ],
  })
}

config.output.publicPath 是/_nuxt/。