Vue 3에서 svg 파일을 가져오는 방법은 무엇입니까?

Question

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

Answer 1

vue-svg-loader는 vue 3과 호환되지 않습니다. svg를 가져와서 구성 요소로 사용하려면 파일 내용을 '템플릿'으로 감싸면 됩니다

구성 요소:

으아아아

웹팩:

으아아아

scripts/svg-to-vue.js:

으아아아

Answer 2

사실 Vue CLI는 이미 기본적으로 SVG를 지원합니다. 내부적으로 file-loader를 사용합니다. 터미널에서 다음 명령을 실행하여 확인할 수 있습니다.

으아악

"svg"가 나열되어 있는 경우(있어야 함) 다음을 수행하면 됩니다.

으아악

따라서 SVG를 표시하는 것이 목적이라면 타사 라이브러리가 필요하지 않습니다.

물론, TypeScript 컴파일러의 유형 선언 요구 사항을 충족하려면:

으아악