解决vite+vue2.7.16项目中svg图片不显示的问题

解决vite+vue2.7.16项目中svg图片不显示的问题

问题概述

在将项目升级到vite+vue2.7.16后，发现页面中的svg图片不再显示，同时img标签的宽高都变为0。

问题分析

升级到vite后，原有的webpack配置不再适用，vite有自己的svg处理方式。因此，需要引入相应的插件并在vite.config.js中进行配置。

解决过程

1. 搜索得知vite处理svg的插件为vite-plugin-svg-icons。
2. 安装vite-plugin-svg-icons插件。
3. 在vite.config.js中配置插件，指定svg图标所在的目录和symbol的id。
4. 修改svg组件代码，确保使用正确的属性和格式。

配置变更

1. 安装vite-plugin-svg-icons插件：

npm install vite-plugin-svg-icons --save-dev

或

yarn add vite-plugin-svg-icons --dev

2. 在vite.config.js中配置插件：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue2';
import vueJsx from '@vitejs/plugin-vue2-jsx';
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
export default defineConfig({
  // ...其他配置...
  plugins: [
    vue(),
    vueJsx(),
    createSvgIconsPlugin({
      iconDirs: [resolve(process.cwd(), "src/icons/svg/")], // svg图标存放的目录
      symbolId: "[name]", // symbol的id
    }),
  ],
  // ...其他配置...
});

3. icon-svg/index.vue（svg组件代码）：

<template>
  <svg
    :class="getClassName"
    :width="width"
    :height="height"
    aria-hidden="true">
    <use :href="getName"></use>
  </svg>
</template>
<script>
export default {
  name: 'icon-svg',
  props: {
    name: {
      type: String,
      required: true,
    },
    className: {
      type: String,
    },
    width: {
      type: String,
      default: '14px',
    },
    height: {
      type: String,
      default: '14px',
    },
  },
  computed: {
    getName() {
      return `#icon-${this.name}`;
    },
    getClassName() {
      return [
        'icon-svg',
        `icon-svg__${this.name}`,
        this.className && /\S/.test(this.className) ? `${this.className}` : '',
      ];
    },
  },
};
</script>
<style>
.icon-svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
  overflow: hidden;
}
</style>

4. 在src/icons/index.js中全局注册IconSvg组件。

import Vue from 'vue'
import IconSvg from '@/components/icon-svg/index.vue'
import './iconfont.js'

Vue.component('IconSvg', IconSvg)

5. 在页面中使用：

<icon-svg name="zhedie"></icon-svg>

结果

经过以上配置和修改，svg图片在页面中成功显示，问题得到解决。