在 Nuxt3 Vite 项目中添加内联 SVG：分步指南

Question

您好，将内联 svgs 导入我的 nuxt3 vite 项目时遇到了麻烦。任何建议将不胜感激。

我发现这个有效 但是我需要一个内联项目。所以我会做这样的事情

并做这样的事情（require在vite中不起作用）。

setup(props) {
        const currentIcon = computed(() => {
            return defineAsyncComponent(() =>
                import(`~/assets/images/icons/push-icon-chatops.svg'?inline`)
            );
        }).value;

        return {
            currentIcon,
        };
    },

但是我发现 vite 的导入方式很奇怪，结果要么是 v-html 中显示的 url 字符串，要么是一个无法读取的对象

我正在尝试使用这个插件，但没有成功。

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()
    ]
},