SVG가 vue-svg-loader를 로드하고 있습니다.[ Vue warn ] :잘못된 구성 요소 정의

SVG가 vue-svg-loader를 로드하고 있습니다.[ Vue warn ] :잘못된 구성 요소 정의

사용하고 싶은 경우vue-svg-loader기존 vue-cli 애플리케이션에서 오류 메시지가 표시됨

[Vue warn]: Invalid Component definition: /img/logout.b0c3dfb7.svg

다음 단계는 이미 완료되어 있습니다.

1) 설치vue-svg-loaderdev Dependency로서

2) Webpack 설정 추가vue.config.js(루트 디렉토리):

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.svg$/,
          loader: 'vue-svg-loader', 
        },
      ],
    }      
  }
};

3) SVG를 Import하여 컴포넌트로 주입

import Logout from '@/assets/img/icons/logout.svg';

export default {
    components: {
      Logout,
    },
...
}

4) 템플릿에서 사용 (UI-Framework로 vuetify)

<v-btn icon @click="logout()">
    <Logout class="icon" />
</v-btn>

---

3가지 질문:

1. 내가 뭘 잘못했나요?
2. 새 웹 팩 설정을 추가하는 방법/장소/필요
3. 또는 기존 파일 변경/삭제/삭제

vue-cli(V3) 프로젝트에 포함됩니까?

다음을 에 추가합니다.vue.config.js:

module.exports = {
  chainWebpack: config => {
    config.module.rules.delete("svg");
  },
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.svg$/, 
          loader: 'vue-svg-loader', 
        },
      ],
    }      
  }
};

webpack.base.conf.js의 규칙 아래에 다음 코드를 추가합니다.

 {
    test: /\.svg$/,
    loader: 'vue-svg-loader',
  }

다음 기존 규칙에서 svg를 삭제합니다.

{
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
 }

언급URL : https://stackoverflow.com/questions/49904540/svg-loading-vue-svg-loader-vue-warn-invalid-component-definition