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

PHPz
Release: 2023-04-11 16:04:01
Original
943 people have browsed it

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.
Copy after login

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
    Copy after login
  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'
    }
  ],
  ...
}
Copy after login
  1. Then use relative paths to reference images in the style
background-image: url(../assets/img/background.png);
Copy after login

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: '/'
}
Copy after login

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template