<p>다음을 시도했습니다: <br /> <a href="https://github.com/visualfanatic/vue-svg-loader/tree/master">https://github com. /visualfanatic/vue-svg-loader/tree/master</a></p> <p>하지만 Vue 2에서는 vue-template-compiler를 사용하기 때문에 버전 충돌이 발생합니다. </p> <p>다음을 시도했습니다:<br /> <a href="https://github.com/visualfanatic/vue-svg-loader">https://github.com/visualfanatic/vue-svg -로더

<p>하지만 특정 Vue 종속성이 누락되었습니다. </p> <p>TypeScript를 사용할 때 유형 정의 파일 선언이 필요한 주의 사항이 있다는 것을 발견했습니다. 그러나 여전히 "'../../assets/myLogo.svg' 모듈 또는 해당 유형 선언을 찾을 수 없습니다." 오류가 발생합니다. </p> <p>제가 추가한 내용은 다음과 같습니다.</p> <p>vue.config.js</p> <pre class="brush:php;toolbar:false;">module.exports = { chainWebpack: (config) => { const svgRule = config.module.rule('svg'); svgRule.uses.clear(); svgRule .use('vue-loader-v16') .loader('vue-loader-v16') .끝() .use('vue-svg-로더') .loader('vue-svg-loader'); }, configureWebpack: process.env.NODE_ENV === '프로덕션' ? {} : { devtool: '소스맵' }, publicPath: process.env.NODE_ENV === '프로덕션' ? '/개인웹사이트/' : '/' }</pre> <p>shims-svg.d.ts</p> <pre class="brush:php;toolbar:false;">'*.svg' 모듈 선언 { const 콘텐츠: 모두; 기본 콘텐츠 내보내기; }</pre> <p>MyComponent.vue</p> <pre class="brush:php;toolbar:false;"><템플릿> <div> <내 로고 /> </div> </템플릿> <스크립트 lang="ts"> "../../assets/myLogo.svg"에서 *를 MyLogo로 가져옵니다. 기본 정의 내보내기({ 이름: "MyComponent", 구성요소: { 마이로고 }, 소품: { }, 설정(소품) { 반품 { 소품 }; } }); <p><br /></p>