Cette fois, je vais vous expliquer la raison pour laquelle les fichiers de ressources ne peuvent pas être trouvés après l'empaquetage des images de référence CSS. Quelles sont les précautions pour résoudre le problème des fichiers de ressources introuvables après l'empaquetage des images de référence CSS. Voici le combat réel. Jetons un coup d'œil au cas.
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%; }
L'effet de la mise à jour à chaud de l'environnement de développement est le suivant
Mais la page après l'emballage signale une erreur indiquant que la ressource est introuvable.
J'ai vérifié la raison. Après que le CSS ait importé l'image puis l'ait empaquetée, le chargeur de style n'a pas pu définir son propre publicPath, j'ai donc modifié le CSS de ExtraireTextPlugin chemin publicPath.
if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, // css 引用图片打包问题 publicPath: '../../../', fallback: 'vue-style-loader' }) } else { return ['vue-style-loader'].concat(loaders) }
Comment gérer l'échec des ressources de polices et d'images après l'empaquetage de vue
Comment résoudre le problème que l'icône de la police Webpack ne peut pas être affichée
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!