从 Vue CLI 项目文件夹下载 .pdf 文件答案

【问题标题】：Download .pdf file from Vue CLI project folder从 Vue CLI 项目文件夹下载 .pdf 文件
【发布时间】：2020-09-17 14:27:35
【问题描述】：

我正在尝试从 Vue 组件中简单地下载 .pdf 文件。它适用于例如 .jpg 或 .png 文件，但不适用于 .pdf 文件。

这是我的 vue.config.js

module.exports = {
  chainWebpack: config => {
    config.module
      .rule("vue")
      .use("vue-loader")
      .loader("vue-loader")
      .tap(options => {
        // modify the options...
        return options;
      });

    config.module
      .rule("pdf")
      .test(/\.pdf$/)
      .use("file-loader")
      .loader("file-loader");
  }
}

在我简化的 Vue 组件中，我尝试像这样下载文件（使用 .jpg）

   <template>
     <div>
       <a :href="pdfLink" download="myPdf.pdf">Download</a>
     </div>
   </template>


 <script>
    name: "PdfFileComponent",
    data: () => ({
    pdfLink: require("../assets/myPdf.pdf")
  })
 </script>

感谢任何帮助！

【问题讨论】：

标签： file vue.js pdf webpack webpack-file-loader

【解决方案1】：

我在 vue.config.js 中对我的规则进行了一些更改

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

希望这可以帮助遇到同样问题的人。

【讨论】：