Vue-cli Webpack Vorlage dient nicht ordnungsgemäß statische Schriftart

Question

In meiner config/index.js, in dem Build-Abschnitt, ich habe

assetsSubDirectory: 'static', 
assetsPublicPath: '/path/to/subdirectory/', 

Meine statischen Schriften, die aus einer Themenvorlage kommen innerhalb node_modules importiert sollte dann bis zu root/pfad/zu/unterverzeichnis/static/fonts/einige-fonts.woff. Ist das richtig?

jedoch in meiner Produktion zu bauen, ist die Build-Suche für diese Dateien an:

root/statisch/fonts/some-fonts.wff

Mein Weniger Datei Beispiel:

@font-face { 
     font-family: 'Source Sans Pro'; 
     font-style: normal; 
     font-weight: 300; 
     src: local('Source Sans Pro'), 
     url(/static/fonts/source-sans-pro/source-sans-pro-v9-vietnamese_latin-ext_latin-300.eot) format('embedded-opentype'), 
     url(/static/fonts/source-sans-pro/source-sans-pro-v9-vietnamese_latin-ext_latin-300.ttf) format('truetype'), 
     url(/static/fonts/source-sans-pro/source-sans-pro-v9-vietnamese_latin-ext_latin-300.woff) format('woff'), 
     url(/static/fonts/source-sans-pro/source-sans-pro-v9-vietnamese_latin-ext_latin-300.woff2) format('woff2'); 
    } 

Wie behebe ich das?

Answer 1

Der Speicherort der Schriftart ist nicht das Problem; Wenn es in Ihrer Entwicklungsumgebung funktioniert, werden die Font-Dateien von node_modules geladen, wenn Sie sich nicht daran gewöhnt haben.

Das Problem ist mit css-loader; read their docs here. Der Pfad public muss nur '/' sein, und 'static' enthält dann 'fonts' als Unterverzeichnis in Ihrem Build. Ich hatte ein ähnliches Problem und das hat es gelöst. Wenn Sie versuchen, etwas anderes als '/' für den öffentlichen Pfad (z. B. eine leere Zeichenfolge) zu tun, dann werden Sie die Vue-CLI-Vorlage Art der Dinge zu tun brechen.

Und das ist der Unterschied - Sie tun nicht "Webpack", wo Sie freie Zeit haben, was Sie wollen. Mit vue-cli akzeptierst du "ihren Weg" Dinge zu konfigurieren (an denen ich nicht klopfe). Wenn Sie, wie oben gezeigt, mehr Freiheiten für benutzerdefinierte Konfigurationen benötigen, sollten Sie das Webpack ohne vue-cli in Betracht ziehen.

Auf jeden Fall, stellen Sie sicher, dass Sie beide Entwickler berühren und Eigentum Karten innerhalb index.js; Diese PATH-Variablen werden für jede Umgebung wiederholt, und manchmal erinnern sich die Codierer nicht daran, bis zur Eigenschaft "Build" zu scrollen und diese PATH-Werte ebenfalls zu ändern.