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

【问题标题】：How to add support for PDF files with Vue Cli 3?如何使用 Vue Cli 3 添加对 PDF 文件的支持？
【发布时间】：2018-08-10 14:00:57
【问题描述】：

我需要配置 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 架构。配置具有未知属性“规则”。

对于如何在 Vue 中增强生成的 Webpack 配置，我显然在理解中遗漏了一些东西。

帮助表示赞赏！谢谢

【问题讨论】：

标签： javascript webpack vue.js vue-cli

【解决方案1】：

原来，我错过了rules 数组的另一个级别。

module: {}

所以应该是完整的：

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

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

【讨论】：

你是如何加载这个的？使用<a href="@/assets/other/file.pdf">File Link</a> 似乎没有激活这个加载器。
把它放在 /public 文件夹中并在你的标签中写下下载

【解决方案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
              }
            }
          ]
        }
      ]
    }
  }
}

【讨论】：