Vite 项目中安装和配置 SVG 的详细指南

<p>要在 Vite 项目中安装和配置 SVG，您需要按照以下步骤进行操作：</p>
<ol>
<li>
<p><strong>安装依赖：</strong> 在终端中导航到您的 Vite 项目根目录，并运行以下命令来安装 '@vitejs/plugin-vue-svg' 插件：</p>
<pre><code class="language-bash"></code></pre>
</li>
</ol>
<p>npm install --save-dev @vitejs/plugin-vue-svg</p>
<pre><code>
2. **配置插件：** 在您的 Vite 项目根目录中找到 'vite.config.js' 文件（如果没有，请创建该文件），并添加以下配置：

```javascript
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueSvgPlugin from '@vitejs/plugin-vue-svg'

export default defineConfig({
plugins: [
 vue(),
 vueSvgPlugin()
]
})
</code></pre>
<ol start="3">
<li>
<p><strong>使用 SVG：</strong> 现在您可以在 Vue 组件中使用 SVG 了。在您的 Vue 组件中，使用 '<svg-component-name />' 的语法来引入和使用 SVG 文件。例如：</p>
<pre><code class="language-vue"></code></pre>
</li>
</ol>
<template>
  <div>
    <svg-icon />
  </div>
</template>
<script>
import SvgIcon from './assets/svg/icon.svg'

export default {
  components: {
    SvgIcon
  }
}
</script>
<pre><code>
在上面的示例中，'SvgIcon' 是您的 SVG 文件的组件名，您需要将 SVG 文件放在 './assets/svg/' 目录下，并根据需要进行调整。

4. **运行项目：** 运行 'npm run dev' 启动您的 Vite 项目，并在浏览器中查看结果。

这样，您就可以在 Vite 项目中安装和配置 SVG 了。请注意，如果您的 Vite 版本较旧，可能需要在步骤 1 中安装 'vite-plugin-vue-svg' 插件而不是 '@vitejs/plugin-vue-svg' 插件。
</code></pre>