So laden Sie eine lokal gespeicherte Datei in VueJS

Question

Ich habe ein Upload-System und ich versuche, eine Beispielvorlage für Benutzer bereitzustellen. Ich habe eine Vorlage lokal in einem Unterordner in Assets gespeichert, ich möchte auf diese in meiner VueJS-Komponente zugreifen und einen Link zu ihr auf der Seite anzeigen. Dies sind die applicaple Teile der Dateistruktur:

├──app 
│ └──Components 
│  └──Uploader.vue 
└──assets 
    └──files 
     └──Template_Upload.csv 

In Uploader.vue habe ich diese Zeile:

<a v-bind:href="item.loc" download>{{item.title}}</a> 

Und im Export Ich habe diese Linie

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

Diese Methode funktioniert, wenn ich ein Bild habe. Wenn Sie auf den Link klicken, wird das Bild heruntergeladen. Wenn ich jedoch eine .csv- oder .xlsx-Datei verwende, werden Fehler beim Öffnen der Seite ausgelöst. Ich habe versucht mit

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

Wie gut, und fileTemplate als loc Eigenschaft. Das funktioniert auch, wenn ich ein Bild verwende. Aber ich kann kein Dokument einreichen. Ist das eine Einschränkung, die ich nicht überwinden kann oder gibt es eine andere Methode, die ich ausprobieren kann?

Ich habe auch in Visual Studio (mit anderen Worten, die CSPROJ-Datei), und stellen Sie die Build Action Template_Upload.csv Einstellung gesetzt ist weg auf „Inhalt“ und die kopieren Ouput Verzeichnis Einstellung ist Wählen Sie "Immer kopieren".

Dies sind die Ressourcen, die ich in erster Linie bisher verwendet haben:

How to import and use image in a Vue single file component?

What are the various "Build action" settings in Visual Studio project properties and what do they do?

Answer 1

Dank OverCoder, die Lösung war in der Tat eine CSV-Loader, um hinzuzufügen, dass die Adds lokal gespeicherte Dateien auf dem Webpack-Server. Für alle anderen webpack verwenden, habe ich dieses Modul zu meiner webpack.config.js Datei:

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

Dann konnte ich die Datei einfach wie diese in meiner Vorlage verweisen,

<a href="/files/Template_Upload.csv" download>File Template</a> 

oder diese

<a :href="item.loc" download>File Template</a> 

mit der gleichen Daten zurück, wie ich schon sagte. Die Verwendung der require-Anweisung mit dem Loader setzt die "erforderlichen" Dateien in den Ordner wwwroot/files, wenn das Projekt erstellt wird. Danke nochmal, OverCoder, das hat mir viel Zeit gespart.