Cette fois, je vais vous présenter les problèmes liés à l'emballage des ressources vuestatique Quelles sont les précautions dans l'emballage des ressources vue statiques. Ce qui suit est un cas pratique, jetons un coup d'œil. .
①. La configuration par défaut de vue-cli est empaquetée et déployée sur un chemin spécifique. L'erreur de chemin des ressources statiques se produit
②. après avoir utilisé des chemins relatifs pour le packaging de ressources statiques.
1. Problème
L'empaquetage par défaut généré par l'échafaudage vue-cli est un fichier de configuration Après l'empaquetage, déployez le projet sur un chemin spécifique : tel que :
//ip:port/public/springActivity/En ce moment, visitez : http://ip:port/public/springActivity/index.htmlindex.html est accessible normalement, mais les réponses js, css et autres serveurs de fichiers référencés sont toutes 404. Vérifiez le chemin de la ressource importée comme suit : http://ip:port/static/css /app. cea07642cd24c0d7a5c4b9b7afc7ff64.csshttp://ip:port/static/js/app.815851e87b083afb82bf.js
Emballez-le à nouveau, déployez les ressources sur un chemin spécifique, puis accédez à :
index.html static/ |--js/ |--*.js |--css/ |--*.css |--img/ |--*.png
background:url(static/img/question_bg.61a2825.png)
5. Lors de la résolution du fichier css Il y a un problème avec le chemin dans le package. Il doit être dû au fait que le chemin de ressource du lien d'emballage n'est pas configuré correctement. L'analyse du processus d'emballage révèle que le CSS est. introduit dans js ou écrit dans le fichier vue. Le fichier css est d'abord traité par less, postcss, etc. Après traitement, il sera traité parExtractTextPlugin, ExtractTextPlugin extrait tous les CSS en js dans l'application. fichier css.
Définissez d'abord options.extract sur false, désactivez la fonction d'extraction CSS, emballez-la à nouveau et déployez-la dans un répertoire spécifique, visitez : http://ip:port/public/springActivity/index.html, bang, page L'affichage normal indique que le Grand-Duc est sur le point d'être terminé. En analysant les fichiers packagés, il a été constaté qu'il n'y avait pas de fichier CSS, et tous les fichiers CSS ont été trouvés dans le fichier app.js. Le CSS a été injecté dans le fichier index.html via js, donc la ressource image ; chemin introduit dans le fichier CSS doit être relatif au chemin du fichier index.html, c'est-à-dire : "static/img/question_bg.61a2825.png", qui est cohérent avec le chemin de la ressource image dans le fichier css ci-dessous, donc l'image est accessible normalement. background:url(static/img/question_bg.61a2825.png)Maintenant, je suis sûr de savoir où réside le problème, c'est-à-dire : ExtractTextPlugin n'a pas converti le chemin d'introduction de la ressource lors de l'extraction du fichier CSS , ce qui fait que l'application.css introduit des ressources statiques qui sont "static/img/ .png" par rapport au répertoire app.css. Le chemin relatif à index.html est : static/css/static/img/ .png.
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath:"../../" //添加
})
}Une fois publicPath configuré, la configuration du chemin est ajoutée avant le chemin du fichier image introduit dans le fichier CSS
La valeur de l'attribut publicPath est le chemin relatif du fichier app.css packagé vers le fichier index.html ; file
Les ressources image peuvent également être placées directement dans le répertoire statique généré par vue-cli pour éviter les problèmes ci-dessus, mais de cette façon, la chaîne md5 ne peut pas être ajoutée au nom de l'image , ce qui n'est pas propice au contrôle de version
Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. J'espère également que tout le monde soutiendra Script Home.
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture recommandée :
Explication détaillée de l'utilisation des composants de haut niveau de mixin
D3.js crée une carte logistique
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!
chaîne js en tableau
Comment obtenir l'adresse de la barre d'adresse
Pourquoi toutes les icônes dans le coin inférieur droit de Win10 apparaissent-elles ?
Quelle plateforme est la meilleure pour le trading de devises virtuelles ?
Application de trading de devises numériques
Pourquoi n'y a-t-il aucune réponse lorsque des écouteurs sont branchés sur l'ordinateur ?
La différence entre les fonctions fléchées et les fonctions ordinaires
Dogecoin dernier prix aujourd'hui
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
