1

我已成功使用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 lib 上的示例，我需要使用MiniCssExtractPlugin.loader而不是vue-style-loader，但这不起作用。我在这里读到它是nuxt内部使用的，但我不知道如何在此处添加它。

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

4

1 回答 1

0

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

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/。_

于 2018-12-23T09:31:41.327 回答