Vue 3에서 svg 파일을 가져오는 방법은 무엇입니까?
<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>
