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：无效的配置对象。的WebPack 已使用不匹配的配置对象初始化 API架构。配置具有未知属性＆＃39;规则＆＃39;。

我在这里的理解中明显缺少一些关于如何在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文件的支持？

2 个答案: