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. file-loader 및 url-loader를 설치합니다

   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);

스타일의 참조 이미지 참고: Webpack 구성 파일에 publicPath 속성을 추가하고 Vue 프로젝트의 루트 경로를 지정해야 합니다

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

마지막으로 프로젝트를 다시 시작하고 패키징합니다. 이런 방식으로 Vue 프로젝트에서 배경 이미지를 올바르게 사용할 수 있습니다!

요약

위는 Vue 패키징 배경 이미지 오류를 해결하는 방법입니다. 텍스트가 아닌 리소스를 사용하는 경우 처리를 위해 해당 로더를 사용해야 합니다. 그렇지 않으면 Webpack이 프로젝트를 올바르게 패키징할 수 없습니다. 동시에 Vue 프로젝트에서는 Webpack 구성 파일의 publicPath 속성에 주의를 기울여 Vue 프로젝트의 루트 경로를 올바르게 지정하는지 확인해야 합니다.

위 내용은 Vue에서 배경 이미지를 패키징할 때 오류 보고에 대한 솔루션에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!