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等文件，并在href的{{1}}中使用它，用户可以查看/下载。

Answer 1

您不必导入它。只需使用正确的URL创建一个<a>标记即可获取pdf文件。您可以先直接在浏览器中检查路径是否正确。

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

在Vue项目中导入本地pdf文件

1 个答案: