Problèmes dans l'empaquetage des ressources statiques vue

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.html

index.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.css

http://ip:port/static/js/app.815851e87b083afb82bf.js

2.Analyse

Il ressort de ce qui précède que le Le chemin d'empaquetage des ressources est incorrect. Les ressources empaquetées utilisent le chemin du répertoire racine absolu, donc lorsque le projet est déployé dans un répertoire spécifique, le chemin des ressources introduit ne peut pas être correctement analysé.

3. Pour résoudre le problème

vous devez utiliser des chemins relatifs pour traiter les ressources statiques lors de l'empaquetage, modifiez la configuration du chemin de version des ressources dans la construction (config/index.js, objet de construction) :

Changez AssetsPublicPath : '/' en AssetsPublicPath : './',

Emballez-le à nouveau, déployez les ressources sur un chemin spécifique, puis accédez à :

À ce stade, indexez .html est accessible normalement, et en même temps les ressources js et css sont également accessibles normalement, mais les grandes ressources d'image dans le répertoire d'actifs introduites dans css ont une erreur (serveur 404)

4. -analyze

Afficher le chemin de la ressource image importée Comme suit :

http://ip:port/public/springActivity/static/css/static/img/question_bg.61a2825.png

Le chemin des ressources dans le projet actuel est le suivant :

index.html
static/
 |--js/
  |--*.js
 |--css/
  |--*.css
 |--img/
  |--*.png

De toute évidence, le chemin d'importation de l'image est erroné. En analysant le chemin d'importation de l'image, nous avons constaté que le chemin comporte deux répertoires supplémentaires "/static/css". On suppose que le fichier CSS dans le répertoire CSS importe le chemin de l'image vers "/static/img/question_bg.61a2825.png". . Vérifiez le fichier css, css Le chemin de l'image introduit est le suivant :

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é par

ExtractTextPlugin, 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.

Par conséquent, lors de l'utilisation du plug-in ExtractTextPlugin, vous devez également configurer les paramètres du chemin de ressource statique. En interrogeant les données, nous avons appris que ce problème peut être résolu en ajoutant publicPath : "../.. /":

if (options.extract) {
 return ExtractTextPlugin.extract({
 use: loaders,
 fallback: 'vue-style-loader',
 publicPath:"../../"     //添加
 })
}

Après avoir empaqueté et déployé dans un répertoire spécifique, accédez au fichier index.html. Tout sur la page est normal, le fichier app.css est importé normalement et les ressources image sont également importées normalement. Vérifiez le fichier app.css pour importer les ressources d'image comme suit :

background: url(../../static/img/question_bg.61a2825.png

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 :

Comment utiliser datepicker

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!