Comment empaqueter des ressources statiques dans vue

Cet article présente principalement les pièges et les solutions dans l'empaquetage des ressources statiques Vue. Cet article résout principalement le problème du chemin. Je vais maintenant le partager avec vous et vous donner une référence.

Cet article résout principalement le problème de

①.vue-cli la configuration par défaut est empaquetée et déployée sur un chemin spécifique lorsque l'erreur de chemin de ressource statique se produit ;

②. Une fois les ressources statiques empaquetées à l'aide de chemins relatifs, le fichier CSS introduit un problème d'erreur de chemin d'image volumineux.

1. Problème

Exécutez npm run build sous le fichier de configuration d'empaquetage par défaut généré par l'échafaudage vue-cli. 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 OK Accès normal, 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 chemin d'empaquetage des ressources. est faux et les ressources packagées sont utilisées 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 résolu.

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 des actifs introduites dans css ont une erreur (serveur 404)

4. -analyze

Afficher le chemin de la ressource d'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 dans est le suivant :

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

5. le

fichier css, il doit être Quelle partie du chemin des ressources du package n'est pas configurée correctement ? En analysant le processus d'empaquetage, il s'avère que le css est introduit dans js ou écrit dans le fichier css. est d'abord traité par less, postcss, etc., puis traité par ExtractTextPlugin. Tous les CSS de js seront extraits dans le fichier app.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 ; Le 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 le 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 l'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é normalement. Vérifiez le fichier app.css pour importer les ressources d'image comme suit :

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

Après que publicPath soit configuré, la configuration du chemin est ajoutée avant le chemin du fichier image introduit dans le fichier css

attribut publicPath La valeur est le chemin relatif du fichier app.css packagé vers le fichier index.html

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 le nom de l'image Il n'est pas possible d'ajouter des chaînes md5, ce qui n'est pas propice au contrôle de version

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

Comment obtenir l'effet d'animation du rebond de bord dans jQuery ?

Comment utiliser sass dans vue cli webpack (tutoriel détaillé)

Comment changer la valeur du texte de la balise P dans jQuery

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!