如何在VueJS中下载本地存储的文件

我有一个上传系统，我正在尝试为用户提供示例模板。我有一个本地存储在资产子文件夹中的模板，我想在我的VueJS组件中访问该模板，并在页面上显示指向该模板的链接。这些是文件结构的适用部分：

???app
?  ???Components
?     ???Uploader.vue
???assets
   ???files
      ???Template_Upload.csv

在Uploader.vue中，我有这行：

{{item.title}}

在出口中，我有这条线

data() {
  return {
    item: {title: 'Upload Template', loc: require('../../assets/files/Template_Upload.csv')}
}

如果我有图像，此方法有效。单击链接后，它将下载图像。但是，如果我使用.csv或.xlsx文件，则在打开页面时会引发错误。我试过使用

import fileTemplate from "../../assets/files/FileTemplate.csv";

同样，并使用fileTemplate作为loc属性。如果我使用图片，这也可以。但是我不能带文件。这是我无法克服的限制，还是可以尝试其他方法？

我还进入了Visual Studio（换句话说就是.csproj文件）js下载文件保存到本地，并将Template_Upload.csv的Build Action设置设置为“ Content”，而Copy to Ouput Directory设置设置为“ Copy Always”。

到目前为止，这些是我主要使用的资源：

如何在Vue单个文件组件中导入和使用图像？

Visual Studio项目属性中的各种“生成操作”设置是什么，它们做什么？

Judd..6

感谢OverCoder，解决方案的确是添加CSV加载程序，以便将本地存储的文件添加到webpack服务器。对于使用webpack的其他人，我将此模块添加到了webpack.config.js文件中：

    {
        test: /\.(csv|xlsx|xls)$/,
        loader: 'file-loader',
        options: {
            name: `files/[name].[ext]`
        }
    }

然后我可以像这样在模板中轻松引用该文件，

File Template

或这个

File Template

使用与我说的相同的数据返回。在项目生成时，将Required语句与加载程序一起使用会将“必需”文件放入wwwroot / files文件夹中。再次感谢OverCoder，这节省了我很多时间。

1> Judd..：

感谢OverCoderjs下载文件保存到本地，解决方案的确是添加CSV加载程序，以便将本地存储的文件添加到webpack服务器。对于使用webpack的其他人，我将此模块添加到了webpack.config.js文件中：

    {
        test: /\.(csv|xlsx|xls)$/,
        loader: 'file-loader',
        options: {
            name: `files/[name].[ext]`
        }
    }

然后我可以像这样在模板中轻松引用该文件，

File Template

或这个

File Template

使用与我说的相同的数据返回。在项目生成时，将Required语句与加载程序一起使用会将“必需”文件放入wwwroot / files文件夹中。再次感谢OverCoder，这节省了我很多时间。