Mari kita bincangkan tentang penyelesaian kepada pelaporan ralat semasa membungkus imej latar belakang dalam Vue

Dalam projek Vue, kami sering menggunakan imej latar belakang. Walau bagaimanapun, semasa membungkus projek, kami mungkin menghadapi ralat berikut:

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

Ini kerana Webpack hanya boleh membungkus beberapa jenis fail tertentu secara lalai, seperti JavaScript, CSS, dsb., dan tidak boleh mengendalikan fail lain. fail bukan jenis teks, seperti gambar, fail audio, dsb. Oleh itu, apabila membungkus imej, kita perlu menggunakan beberapa Pemuat untuk memprosesnya.

Penyelesaian kepada masalah ini adalah seperti berikut:

1. Pasang pemuat fail dan pemuat url

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

2. dalam pek web. config. Perlu berada dalam fail konfigurasi Webpack Tambah atribut publicPath dan nyatakan laluan akar projek Vue

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'
    }
  ],
  ...
}

Akhir sekali, mulakan semula projek dan bungkusnya. Dengan cara ini kita boleh menggunakan imej latar belakang dengan betul dalam projek Vue!

3. Ringkasan

Di atas adalah kaedah untuk menyelesaikan ralat imej latar belakang pembungkusan Vue. Apabila kami menggunakan beberapa sumber jenis bukan teks, kami mesti menggunakan Pemuat yang sepadan untuk pemprosesan, jika tidak, Webpack tidak akan dapat membungkus projek kami dengan betul. Pada masa yang sama, dalam projek Vue, kita perlu memberi perhatian kepada atribut publicPath bagi fail konfigurasi Webpack untuk memastikan ia menentukan laluan akar projek Vue dengan betul.

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

Atas ialah kandungan terperinci Mari kita bincangkan tentang penyelesaian kepada pelaporan ralat semasa membungkus imej latar belakang dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!