Nuxt3 Vite 프로젝트에 인라인 SVG 추가: 단계별 가이드

Question

안녕하세요, nuxt3 vite 프로젝트에 인라인 SVG를 가져오는 데 문제가 있습니다. 어떤 조언이라도 대단히 감사하겠습니다.

나는 이것이 작동하고 但是我需要一个内联项目。所以我会做这样的事情

이와 같은 일을 하는 것을 발견했습니다(require는 vite에서는 작동하지 않습니다).

으아악

하지만 vite를 가져오는 방식이 이상하다는 것을 알았습니다. 결과는 v-html에 표시된 URL 문자열이거나 읽을 수 없는 개체입니다

이 플러그인을 사용하려고 하는데 성공하지 못했습니다.

https://github.com/nuxt-community/svg-module

Answer 1

TS Nuxt 3 프로젝트의 상황은 다음과 같습니다.

nuxt.config.ts 파일:

으아악

구성 요소 예:

으아악

마지막 ?component을 주의하는 것이 중요합니다. 그렇지 않으면 TS에서 오류를 보고합니다.

플러그인 문서: vite-svg-loader

Answer 2

vite가 실제로 @nuxtjs/svg플러그인과 호환되지 않는 것 같습니다. 따라서 대답은 vite 특정 플러그인을 설치하는 것입니다. 이 경우에는 vite 플러그인을 설치한 다음 이 작업을 수행했습니다

으아아아