如何使用 Vue Cli 3 添加对 PDF 文件的支持？

Question

我需要配置 Webpack 以通过 Vue Cli（最新）url-loader 接受和处理 PDF 文件。

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

我收到错误：

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 配置的理解中，我显然遗漏了一些东西。

帮助感谢！谢谢

Answer 1

原来，我错过了 rules 数组的另一层。

module: {}

所以它应该是完整的：

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

我的错！希望这可以帮助那里的人。

Answer 2

对于 coffeescript 和 vue-cli 版本 3，我需要 npm install -D coffee-loader 然后将此文件创建为 vue.config.js:

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.coffee$/,
          use: [
            {
              loader: 'coffee-loader',
              options: {
                sourceMap: true
              }
            }
          ]
        }
      ]
    }
  }
}

如何使用 Vue Cli 3 添加对 PDF 文件的支持？

How to add support for PDF files with Vue Cli 3?

javascript

webpack

vue.js

vue-cli