Maison > interface Web > js tutoriel > le corps du texte

Résoudre le problème des fichiers de ressources introuvables après le conditionnement des images référencées CSS dans vue+webpack

亚连
Libérer: 2018-06-01 10:13:42
original
2902 Les gens l'ont consulté

Maintenant, je vais partager avec vous un article détaillé sur la façon dont vue+webpack résout le problème des fichiers de ressources introuvables après le packaging des images référencées CSS. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

Utilisez vue pour empaqueter et référencer des ressources d'images via CSS.

.img { 
  height: 500px; 
  width: 100%; 
  background: url("./assets/img/1.jpg") no-repeat; 
  background-size: 100%; 
 }
Copier après la connexion

L'effet de la mise à jour à chaud de l'environnement de développement est comme ça

Mais c'est packaged La page a signalé une erreur indiquant que la ressource était introuvable.

Après avoir vérifié la raison, style-loader n'a pas pu définir son propre publicPath après que le CSS ait importé l'image et l'ait empaquetée, j'ai donc modifié le chemin CSS publicPath de ExtractTextPlugin.

if (options.extract) { 
   return ExtractTextPlugin.extract({ 
    use: loaders, 
    // css 引用图片打包问题 
    publicPath: '../../../', 
    fallback: 'vue-style-loader' 
   }) 
  } else { 
   return ['vue-style-loader'].concat(loaders) 
  }
Copier après la connexion

Après avoir construit une fois, aucune erreur n'a été signalée et l'affichage était normal !

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles associés :

Résoudre le problème que la page ne s'affiche pas lorsque Vue modifie le tableau via le tableau suivant

Implémentation de Vue.js Comment faire glisser des images à volonté

Résoudre le problème de Vue en modifiant le tableau via le tableau suivant et la page ne s'affiche pas

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
web
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!