Le chemin de l'image est erroné après l'empaquetage de vue-cli3

Avec le développement continu de la technologie front-end, divers frameworks et outils émergent également. Dans cette ère de grandes vagues, Vue.js est sans aucun doute une existence incontournable. Cependant, à mesure que Vue.js devient de plus en plus populaire, nous rencontrerons certains problèmes. Cet article présentera le problème des chemins d'image incorrects lors de l'utilisation de vue-cli3 pour empaqueter des projets et fournira quelques solutions.

Description du problème

Lors de l'utilisation de vue-cli3 pour le développement de projets, nous pouvons généralement utiliser la balise img pour introduire des images. Par exemple : img 标签来引入图片。例如：

<img src="./assets/img/logo.png" alt="logo" />

这里假设 logo.png 图片位于项目的 assets 目录下。在运行 npm run serve 命令时，该图片可以正确显示。但是，当我们运行 npm run build 命令进行打包后，我们访问打包后的页面却发现图片无法正常显示，通过浏览器的开发者工具，我们可以发现其实图片加载失败了，并且控制台给出了如下错误信息：

http://your-domain.com/img/logo.4aebf758.png 404 (Not Found)

这里的 http://your-domain.com 是指打包后项目的根目录路径。

造成这个问题的原因

我们知道，Vue.js 基于组件化的开发模式，一般情况下，每个组件都是一个单独的文件，包括 HTML 模板、CSS 样式、JavaScript 代码等。在 Vue.js 的开发过程中，我们通常会使用 webpack 打包工具来进行构建打包。由于 webpack 文件打包的机制，它会将每个组件所需的所有资源打包到相应的 JavaScript 文件中，而浏览器仅能通过 HTTP 请求获取到静态资源，因此 webpack 打包时会将资源文件（包括图片）的路径转换为 HTTP 请求路径。

换句话说，当我们使用相对路径来引用资源文件时，在项目运行时该图片会在 http://localhost:8080 根目录下搜索，而在打包时，图片的路径已经被 webpack 打包为新的路径，并放在了根目录下的 img 目录下。因此，我们在使用 webpack 打包后的文件时，需要针对路径进行修改。

解决方案

修改静态资源根路径

我们可以通过修改 vue.config.js 中 publicPath 字段的值来替换根路径，从而解决路径错误的问题。

首先，在项目根目录中新建 vue.config.js 文件，并输入如下代码：

module.exports = {
  publicPath: './'
}

这里的 publicPath 实际上就是设置了打包后的静态资源存放路径，上述代码表示静态资源和 index.html 存放在同一个目录下。

使用绝对路径引用图片

除了通过修改 publicPath 来解决问题，我们还可以直接使用绝对路径来引用图片，这样就避免了由相对路径带来的问题。例如：

<img src="/img/logo.4aebf758.png" alt="logo" />

这里的 / 表示项目根路径，通过此方式引用的图片不会受相对路径的影响。

将图片文件放置在公共目录下

我们也可以将图片文件放置在 /publicrrreee

Cela suppose que l'image logo.png se trouve dans le répertoire assets du projet. L'image s'affiche correctement lors de l'exécution de la commande npm run serve. Cependant, lorsque nous exécutons la commande npm run build pour l'empaquetage, nous visitons la page empaquetée et constatons que l'image ne peut pas être affichée normalement. Grâce aux outils de développement du navigateur, nous pouvons constater que le chargement de l'image échoue. Et la console a donné le message d'erreur suivant :

rrreee

http://your-domain.com fait ici référence au chemin du répertoire racine du projet packagé.

La raison de ce problème🎜🎜Nous savons que Vue.js est basé sur le modèle de développement de composants. Généralement, chaque composant est un fichier distinct, comprenant des modèles HTML, des styles CSS, des codes JavaScript, etc. Pendant le processus de développement de Vue.js, nous utilisons généralement l'outil d'empaquetage webpack pour créer et empaqueter. En raison du mécanisme d'empaquetage des fichiers Webpack, il regroupera toutes les ressources requises par chaque composant dans le fichier JavaScript correspondant, et le navigateur ne peut obtenir des ressources statiques que via des requêtes HTTP, donc Webpack empaquetera les fichiers de ressources (y compris les images) ) le chemin est converti en chemin de requête HTTP. 🎜🎜En d'autres termes, lorsque nous utilisons des chemins relatifs pour référencer des fichiers de ressources, l'image sera recherchée dans le répertoire racine de http://localhost:8080 lorsque le projet est en cours d'exécution et lors du packaging, l'image Le chemin a été empaqueté en tant que nouveau chemin par webpack et placé dans le répertoire img du répertoire racine. Par conséquent, lorsque nous utilisons des fichiers packagés Webpack, nous devons modifier le chemin. 🎜🎜Solution🎜

Modifier le chemin racine des ressources statiques

🎜Nous pouvons remplacer le chemin racine en modifiant la valeur du champ publicPath dans vue.config.js , résolvant ainsi le problème des mauvais chemins. 🎜🎜Tout d'abord, créez un nouveau fichier <code>vue.config.js dans le répertoire racine du projet et entrez le code suivant : 🎜rrreee🎜Le publicPath ici définit en fait la ressource statique empaquetée chemin de stockage. Le code ci-dessus indique que les ressources statiques et index.html sont stockés dans le même répertoire. 🎜

Utiliser des chemins absolus pour référencer des images

🎜En plus de résoudre le problème en modifiant publicPath, nous pouvons également utiliser directement des chemins absolus pour référencer des images, évitant ainsi les problèmes causés par les chemins absolus pour référencer des images. question des chemins. Par exemple : 🎜rrreee🎜/ représente ici le chemin racine du projet, et les images référencées de cette manière ne seront pas affectées par les chemins relatifs. 🎜

Placez les fichiers image dans le répertoire public

🎜Nous pouvons également placer les fichiers image dans le répertoire /public Les fichiers de ce répertoire ne seront pas empaquetés par webpack, mais. Copiez directement dans le répertoire packagé. De cette façon, nous pouvons référencer directement ces images en utilisant des chemins relatifs. 🎜🎜Résumé🎜🎜Que ce soit en modifiant le chemin ou en utilisant un chemin absolu pour référencer l'image, la solution est relativement simple. Dans le développement réel, afin de réduire le problème des erreurs de chemin, nous pouvons développer de bonnes habitudes pendant le développement et essayer d'utiliser des chemins absolus ou de placer des images dans des répertoires publics. Cela facilite non seulement le débogage et la maintenance, mais réduit également les erreurs de chemin après l'empaquetage. J'espère que cet article vous sera utile. 🎜

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!