vue项目中导入本地pdf文件

Question

我正在尝试在我的 vue 项目中导入本地 pdf 文件（使用 vue-cli@latest 引导，使用默认配置）但 vue 尝试解析它并给出此错误：

./src/assets/myFile.pdf 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)

我只想通过单击按钮使文件可供下载，因此我不需要解析它，但我需要它通过 webpack 以便文件名得到哈希值，因此我想避免将它放入公共文件夹并使用env.BASE_URL。
这是我的.vue 组件文件。

<template>
  <div class="root">
    <a
      v-bind:href="MyPdf"
      download='Something.pdf'
    >
      Download as pdf
    </a>
  </div>
</template>

<script>
  import MyPdf from '../assets/my.pdf';

  export default {
    name: "PdfDownload",
    data: function () {
      return { MyPdf }
    }
  }
</script>

<style scoped>
  ...
</style>

我在 SO 上发现了类似的问题，但没有一个答案能解决问题。我发现的唯一解决方案是在 vue 文档上使用 public 文件夹，但我不希望这样，因为我想要文件名中的哈希值。我是vue新手，来自React，在React中你可以简单的在js中导入pdf、word等文件，在a的href中使用，用户可以查看/下载。

Answer 1

您不必导入它。只需为您的 pdf 文件创建一个带有正确 URL 的 <a> 标签。 之前可以直接在浏览器中检查下载路径是否正确。

编辑： 如果你遇到同样的问题并且你正在使用 webpack，你必须确保你使用的是 pdf 扩展的加载器。在这种情况下，用户使用的是 vue-cli，更改 webpack 配置的方法是在vue.config.js。我创建了一个gist 来展示如何添加它。