vue中使用svg

在Vue中使用SVG有以下几种方式：

1. 将SVG代码直接作为模板中的一个字符串：

<template>
  <div>
    <svg width="100" height="100">
      <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
    </svg>
  </div>
</template>

2. 使用`<object>`标签引入SVG文件：

<template>
  <div>
    <object type="image/svg+xml" data="./assets/logo.svg"></object>
  </div>
</template>

3. 使用`<img>`标签引入SVG文件：

<template>
  <div>
    <img src="./assets/logo.svg" alt="Logo">
  </div>
</template>

需要注意的是，如果使用`<object>`或`<img>`标签引入SVG文件，则需要在`vue.config.js`中进行配置，以确保文件能够正确地被引入：

module.exports = {
  chainWebpack: config => {
    const svgRule = config.module.rule('svg');
    svgRule.uses.clear();
    svgRule.use('svg-sprite-loader').loader('svg-sprite-loader');
  }
};

以上是使用SVG的基本方式，需要根据具体情况进行调整。