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

Question

我只是想从 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>

感谢任何帮助！

Answer 1

我在 vue.config.js

中对我的规则进行了一些更改

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

希望这对遇到同样问题的人有所帮助。