modèle Vue-cli Webpack ne servant pas correctement les polices statiques

Question

Dans mes config/index.js, dans la section de construction, je

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

Mes polices statiques qui viennent d'un modèle de thème importé à l'intérieur node_modules devrait alors recherchez racine/chemin/vers/sous-répertoire/static/fonts/some-fonts.woff. Est-ce correct?

Cependant, dans ma version de production, la construction est à la recherche de ces fichiers à:

racine/statique/polices/some-fonts.wff

Mon fichier Moins échantillon:

@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'); 
    } 

Comment résoudre ce problème?

Answer 1

L'emplacement de la police n'est pas le problème; Si cela fonctionne dans votre environnement de développement, les fichiers de polices sont chargés à partir de node_modules comme vous l'avez prévu.

Le problème est avec css-loader; . Le chemin public doit être '/' uniquement, et 'static' contiendra alors 'fonts' comme sous-répertoire dans votre build. J'ai eu un problème similaire et cela a résolu le problème. Si vous essayez de faire quelque chose d'autre que '/' pour le chemin public (par exemple, une chaîne vide), alors vous casserez la façon de faire les choses en mode vue-cli.

Et c'est la différence - vous ne faites pas de "webpack" où vous avez le loisir de régler ce que vous voulez. Avec vue-cli vous acceptez "leur façon" de configurer les choses (que je ne frappe pas). Si vous avez besoin de plus de liberté pour faire des configurations personnalisées comme vous le montrez ci-dessus, pensez à webpack sans vue-cli. Dans tous les cas, assurez-vous de toucher à la fois les cartes de propriétés dev et build dans index.js; ces variables PATH sont répétées pour chaque environnement et parfois les codeurs ne se souviennent pas de faire défiler la propriété 'build' et de changer aussi ces valeurs PATH.