Parlons de la solution au rapport d'erreurs lors de l'empaquetage d'images d'arrière-plan dans Vue

Dans les projets Vue, nous utilisons souvent des images d'arrière-plan. Cependant, lors du packaging du projet, nous pouvons rencontrer l'erreur suivante :

ERROR in ./src/assets/img/background.png
Module build failed: Error: You may need an appropriate loader to handle this file type.

En effet, Webpack ne peut packager que certains types de fichiers spécifiques par défaut, tels que JavaScript, CSS, etc., et ne peut pas gérer d'autres fichiers de type non texte, tels que des images, de l'audio et d'autres fichiers. Par conséquent, lors du packaging des images, nous devons utiliser certains Loaders pour les traiter.

La façon de résoudre ce problème est la suivante :

1. Installez le chargeur de fichiers et le chargeur d'url

   npm install file-loader url-loader --save-dev

   Copier après la connexion
2. Ajoutez les règles suivantes dans le fichier webpack.config.js

module: {
  rules: [
    {
      test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
      use: [
        {
          loader: 'url-loader',
          options: {
            limit: 10000,
            name: 'img/[name].[hash:7].[ext]'
          }
        }
      ]
    },
    {
      test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
      loader: 'url-loader',
      options: {
        limit: 10000,
        name: 'media/[name].[hash:7].[ext]'
      }
    },
    {
      test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
      loader: 'url-loader',
      options: {
        limit: 10000,
        name: 'fonts/[name].[hash:7].[ext]'
      }
    },
    {
      test: /\.scss$/,
      loaders: ["style", "css", "sass"]
    },
    {
      test: /\.vue$/,
      loader: 'vue-loader'
    }
  ],
  ...
}

3. Ensuite, utilisez des chemins relatifs pour images de référence dans le style

background-image: url(../assets/img/background.png);

Remarque : vous devez ajouter l'attribut publicPath au fichier de configuration Webpack et spécifier le chemin racine du projet Vue

output: {
    path: config.build.assetsRoot,
    filename: '[name].[chunkhash].js',
    publicPath: '/'
}

Enfin, redémarrez le projet et emballez-le. De cette façon, nous pouvons utiliser correctement les images d'arrière-plan dans les projets Vue !

Résumé

Ce qui précède est la méthode pour résoudre l'erreur de l'image d'arrière-plan de l'emballage Vue. Lorsque nous utilisons certaines ressources de type non texte, nous devons utiliser le Loader correspondant pour le traitement, sinon Webpack ne pourra pas empaqueter correctement notre projet. Dans le même temps, dans le projet Vue, nous devons prêter attention à l'attribut publicPath du fichier de configuration Webpack pour nous assurer qu'il spécifie correctement le chemin racine du projet Vue.

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!