为什么 Vue 3 只在 Sprite 中渲染第一个 SVG？

Question

我有一个 Vue 3.1.1 项目，但遇到了一个奇怪的问题。如果我将引用精灵的 SVG 文件放入我的模板中，则只会出现它的第一个实例。

这是我的模板代码：

<template>
<div>
  <svg>
    <use href="@/assets/images/icons-master.svg#project"></use>
  </svg>
  <svg>
    <use href="@/assets/images/icons-master.svg#project"></use>
  </svg>
</div>
</template>

以下是它在 DOM 中的呈现方式（在 Chrome、Firefox 和 Safari 中测试）：

看看它如何从第二个 SVG 的文件路径中删除 #project？

如果我尝试不同的文件名，我可以看到文件使用位置的第一个实例，随后的 SVG 删除了 #id 并且不显示。

我的 SVG 文件结构如下。

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="project" viewbox="0 0 16 17">
    <g ...>
      <path ...>
      </path>
    </g>
  </symbol>
</svg>

这曾经在 Vue 2.x 中工作正常。这是不正确的 SVG 语法还是 Vue 中的错误？

Answer 1

这可能是 a bug with Vite，但看起来解决方法是不使用 @ 中的 vite.config.js 路径组件：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, '/src'),
    },
  }
})

因此解决方法是将 SVG 路径更改为：

src/assets/images/icons-master.svg#project

其中 src 替换 @。