Vue で背景画像をパッケージ化するときのエラー報告の解決策について話しましょう-フロントエンドQ&A-php.cn

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

PHPz

リリース： 2023-04-11 16:04:01

オリジナル

956 人が閲覧しました

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

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

ファイルローダーと URL ローダーを
```
npm install file-loader url-loader --save-dev
```
ログイン後にコピー
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'
    }
  ],
  ...
}

ログイン後にコピー

次に、相対パスを使用してスタイルで画像を参照します

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 サイトの他の関連記事を参照してください。