Let’s talk about the solution to error reporting when packaging background images in Vue

In Vue projects, we often use background images. However, when packaging the project, we may encounter the following error:

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

This is because Webpack can only package some specific file types by default, such as JavaScript, CSS, etc., and cannot handle other non-text types. files, such as pictures, audio and other files. Therefore, when packaging images, we need to use some Loaders to process them.

The method to solve this problem is as follows:

1. Install file-loader and url-loader

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

2. In the webpack.config.js file Add the following rules

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. Then use relative paths to reference images in the style

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

Note: You need to add the publicPath attribute to the Webpack configuration file and specify Vue The root path of the project

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

Finally, restart the project and package it. In this way we can use background images correctly in Vue projects!

Summary

The above is the method to solve the error of Vue packaging background image. When we use some non-text resources, we must use the corresponding Loader for processing, otherwise Webpack will not be able to package our project correctly. At the same time, in the Vue project, we need to pay attention to the publicPath attribute of the Webpack configuration file to ensure that it correctly specifies the root path of the Vue project.

The above is the detailed content of Let’s talk about the solution to error reporting when packaging background images in Vue. For more information, please follow other related articles on the PHP Chinese website!