如何使用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：無效的配置對象。 已使用與API模式不匹配的配置對象初始化Webpack。 配置具有未知屬性“規則”。

我在這里的理解中顯然缺少關於如何在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 } } ] } ] } } }