如何使用Vue Cli 3添加对PDF文件的支持? [英] How to add support for PDF files with Vue Cli 3?

问题描述

我需要将Webpack配置为通过Vue Cli(最新)使用 url-loader 接受和处理PDF文件.

I need to configure Webpack to accept and handle PDF files with url-loader via the Vue Cli (latest).

vue.config.js

module.exports = {
  configureWebpack: {
    rules: [
      {
        test: /\.(pdf)(\?.*)?$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              name: 'files/[name].[hash:8].[ext]'
            }
          }
        ]
      }
    ]
  }
}

以上内容看起来正确还是我遗漏了一些东西?此处的文档位于: https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md#basic-configuration

Does the above look correct or am I missing something? The docs on this are here: https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md#basic-configuration

我得到了错误:

WebpackOptionsValidationError:无效的配置对象.Webpack已使用不匹配的配置对象进行了初始化API模式.配置具有未知的属性规则".

WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. Configuration has an unknown property 'rules'.

在我的理解中，我显然缺少关于如何在Vue中扩展生成的Webpack配置的东西.

I'm obviously missing something in my understanding here about how to augment the generated Webpack config in Vue.

帮助表示赞赏！谢谢

推荐答案

结果是，我错过了 rules 数组的另一个层次.

Turns out, I was missing another level for the rules array.

module: {}

因此它应该完整:

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.(pdf)(\?.*)?$/,
          use: [
            {
              loader: 'url-loader',
              options: {
                name: 'files/[name].[hash:8].[ext]'
              }
            }
          ]
        }
      ]
    }
  }
}

我不好！希望这对外面的人有帮助.

My bad! Hopefully this helps someone out there.

这篇关于如何使用Vue Cli 3添加对PDF文件的支持?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！