J'ai rencontré ce problème lors de l'utilisation de la ligne de commande cnpm run build pour empaqueter et déployer le projet vue.js, veuillez demander de l'aide T T
Tout d'abord, le Tomcat d'arrière-plan est configuré avec le contexte d'application comme xxx, donc le chemin racine du serveur devient http://localhost:8080/xxx
Maintenant, définissez l'image sur <img src="../../assets/ad.png">
Après l'empaquetage et le déploiement, l'image ne peut pas être affichée et lorsque vous visualisez l'élément, elle devient <img src ="/static/img/ ad.22bf537.png">
Le rapport d'erreur ne peut pas être chargé http://localhost:8080/static/...
Changez directement le chemin en <img src="./static/img/ad.22bf537.png"> et il sera affiché
Alors, comment devrions-nous résoudre ce problème avant l’emballage ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
L'échafaudage de Vue-cli est construit par défaut selon le projet d'environnement de production, ce qui signifie en gros construire un projet directement au lieu d'un petit module sous un certain projet. Par conséquent, les sites Web ordinaires placeront les fichiers statiques dans le répertoire racine du site Web. Vous pouvez ouvrir le répertoire dist généré après la construction. La structure à l'intérieur est la suivante :
.Alors il n'y a que deux façons de résoudre votre problème :
Modifiez l'emplacement final de la ressource, par exemple en plaçant le fichier statique dans le répertoire racine du projet
Modifier les liens de référence vers les ressources sur la page
Pas besoin d'expliquer le premier, déplacez simplement l'emplacement du répertoire.
La deuxième méthode comporte de nombreuses méthodes, mais il est préférable d'atteindre l'objectif en modifiant la configuration de webpack. Il est recommandé à l'auteur de regarder de plus près le fichier de configuration de webpack~
Lorsque j'ai remplacé AssetsPublicPath par /public/, le lien de ressource de la sortie index.html a changé :
Il existe une autre méthode universelle, utilisant
string-replace-loader, qui consiste simplement à faire correspondre la chaîne puis à la remplacer. Pour des instructions détaillées, vous pouvez voir ici.J'espère que cela vous aidera.
Ou définissez le chemin de l'image require('picture path') comme src de img Vous pouvez essayer cette méthode
.