Server eine statische pdf - Vue CLI - Webpack - Ausgabe

Question

Ich baue eine kleine Front dank VueCLI (+ Vuetify).

Ich wollte eine Schaltfläche rendern, wo onClick eine neue Registerkarte mit einer PDF-Datei im Ordner Baum des Projekts öffnen.

Ich habe einen Fehler und nach Stunden suchen, warum es scheint, ein Webpack Conf zu ändern.

Ich lese endlich diese Antwort auf S/O; Serving static pdf with react webpack file loader

Aber ich habe eine Fehlermeldung, include: paths -> paths is not defined

Ich muss zugeben, dass ich keine Ahnung, wie webpack hinter den Kulissen arbeitet so dass jede Hilfe finden würde.

Answer 1

Sie brauchen dafür wahrscheinlich kein Webpack: Sie können es einfach in Ihren statischen Ordner einfügen und darauf verlinken <a href="/static/mypdf.pdf">pdf</a>. Wenn Sie die Webpack Weg gehen wollen, setzen Sie es in Ihrem src/assets Verzeichnis und importieren Sie es und fügen Sie es zu Datenobjekt:

import pdf from '../assets/mypdf.pdf' 

//... 
data:() => ({ pdf }) 
//... 

Dann den Link in Ihrer Komponente verwenden:

<a :href="pdf">pdf</a> 

Sie wahrscheinlich hinzugefügt include: paths an den loader Config aber du hast es nicht definieren, anstatt Ihr Bild loader modifizieren, fügen Sie eine neue für PDFs:

{ 
    test: /\.(pdf)(\?.*)?$/, 
    loader: 'url-loader', 
    options: { 
     name: utils.assetsPath('[name].[hash:7].[ext]') 
    } 
    } 

Sie könnenändern 210 Wenn Sie möchten, sagen Sie, dass Sie ein Verzeichnis pdfs in Assets hinzufügen möchten, anstatt das Basis-Assets-Verzeichnis zu verwenden, das Sie verwenden würden: