vue配置file-loader实现前端本地文档文件下载，解决浏览器‘无法从网站上下载文件’报错

1.问题环境

        下载前端本地文件时，会让浏览器触发‘无法从网站上下载文件’报错，如果引入文件，则会在终端报错.

        这段表示Webpack在处理文件时遇到了问题，提示需要配置合适的loader来处理这种文件类型。对于二进制文件（如PDF文件），Webpack默认是不知道如何处理的，因此需要配置相应的loader来处理。可以尝试安装并配置file-loader或者url-loader来处理PDF文件，这样Webpack就能正确加载和处理PDF文件了。

<a :href="require(`../assets/demo.pdf`)" target="_blank" download="文件.pdf" >下载文件</a>

error in render: "Error: Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)"

2.解决问题

1.确保你的项目中已经安装了file-loader，vue项目会自动安装

npm install file-loader --save-dev

2.在Webpack配置文件中（通常是webpack.config.js或者vue.config.js），添加对PDF文件的处理规则。

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('documents')
      .test(/\.(pdf|docx|xlsx)$/i)
      .use('file-loader')
      .loader('file-loader')
      .options({
        name: 'assets/[name].[hash:8].[ext]'
      })
      .end();
  }
};

在这个示例中，我们配置了处理.pdf、.docx和.xlsx文件的规则，并使用file-loader来处理这些文件。确保将这段代码添加到你的vue.config.js文件中，并根据需要调整文件名等选项。

这样就实现了本地文件下载