Hallo, ich habe Probleme beim Importieren von Inline-SVGs in mein nuxt3-Vite-Projekt. Für jeden Rat wäre ich sehr dankbar.
Ich habe das gefunden, das funktioniert 
setup(props) {
const currentIcon = computed(() => {
return defineAsyncComponent(() =>
import(`~/assets/images/icons/push-icon-chatops.svg'?inline`)
);
}).value;
return {
currentIcon,
};
},
Aber ich fand, dass die Art und Weise, wie Vite importiert wird, seltsam ist. Das Ergebnis ist entweder die in V-HTML angezeigte URL-Zeichenfolge oder ein unlesbares Objekt
Ich versuche, dieses Plugin zu verwenden, aber ohne Erfolg.
https://github.com/nuxt-community/svg-module
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
对于 TS Nuxt 3 项目，情况如下。
nuxt.config.ts文件：import svgLoader from 'vite-svg-loader' export default defineNuxtConfig({ // Rest of your config. vite: { plugins: [ svgLoader({ // Your settings. }), ], }, })组件示例：
<template> <div> <ArrowLeft /> </div> </template> <script setup lang="ts"> import ArrowLeft from '../assets/svg/arrow-left.svg?component' </script>注意最后的
?component很重要，否则TS会报错。插件文档：vite-svg-loader
看来vite实际上与
@nuxtjs/svg插件不兼容。所以答案是安装一个 vite 特定插件，在这种情况下我安装了 vite 插件 然后执行此操作vite: { plugins: [ svgLoader() ] },