Hinzufügen von Inline-SVG zu Ihrem Nuxt3 Vite-Projekt: eine Schritt-für-Schritt-Anleitung

Question

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 但是我需要一个内联项目。所以我会做这样的事情

und so etwas macht (require funktioniert in Vite nicht).

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

Answer 1

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

Answer 2

看来vite实际上与@nuxtjs/svg插件不兼容。所以答案是安装一个 vite 特定插件，在这种情况下我安装了 vite 插件 然后执行此操作

vite: {
    plugins: [
        svgLoader()
    ]
},