Vue で背景画像をパッケージ化するときのエラー報告の解決策について話しましょう

Vue プロジェクトでは、背景画像をよく使用します。ただし、プロジェクトをパッケージ化するときに、次のエラーが発生する場合があります:

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

これは、Webpack がデフォルトでパッケージ化できるのは JavaScript、CSS などの特定のファイル タイプのみであり、その他のファイル タイプ以外のファイル タイプは処理できないためです。テキストタイプ、画像、音声、その他のファイルなどのファイル。したがって、画像をパッケージ化するときは、いくつかのローダーを使用して処理する必要があります。

この問題を解決する方法は次のとおりです。

1. ファイルローダーと URL ローダーを

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

2. 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. 次に、相対パスを使用してスタイルで画像を参照します

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

注: publicPath 属性を追加する必要がありますWebpack 構成ファイルに Vue を指定します。プロジェクトのルート パス

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

最後に、プロジェクトを再起動してパッケージ化します。このようにして、Vue プロジェクトで背景画像を正しく使用できるようになります。

まとめ

以上はVueの背景画像のパッケージ化エラーを解決する方法です。テキスト以外のリソースを使用する場合は、対応するローダーを使用して処理する必要があります。そうしないと、Webpack はプロジェクトを正しくパッケージ化できません。同時に、Vue プロジェクトでは、Webpack 構成ファイルの publicPath 属性に注意して、Vue プロジェクトのルート パスが正しく指定されていることを確認する必要があります。

以上がVue で背景画像をパッケージ化するときのエラー報告の解決策について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。