javascript - How to add support for PDF files with Vue Cli 3? - Stack Overflow

admin管理员组

文章数量:1335106

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]'
            }
          }
        ]
      }
    ]
  }
}

Does the above look correct or am I missing something? The docs on this are here: .md#basic-configuration

I get the error:

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'.

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

Help appreciated! Thanks

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]'
            }
          }
        ]
      }
    ]
  }
}

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

I get the error:

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'.

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

Help appreciated! Thanks

• javascript
• webpack
• vue.js
• vue-cli

Share Improve this question Follow asked Mar 2, 2018 at 10:55 Michael Giovanni PumoMichael Giovanni Pumo 14.8k1818 gold badges9999 silver badges145145 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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

module: {}

So it should be in full:

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.

For coffeescript and vue-cli version 3, I needed to npm install -D coffee-loader and then create this file as vue.config.js:

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

本文标签： javascriptHow to add support for PDF files with Vue Cli 3Stack Overflow