vue3 + ant design vue项目svg格式的background-image使用配置

直接使用的时候会报错:

1. 图片解析不出来还是svg源文件代码
   
2. 项目启动报错
   
   
3. vue3使用的时候普通配置会出现this.getOptions is not function错误（ Webpack 版本升级引起的，在较新的 Webpack 版本中，this.getOptions 方法已被移除。）
   

以上错误解决及配置方法：

1. 安装npm install svg-sprite-loader svgo-loader --save-dev，（svg-sprite-loader 解析 SVG 文件，将其打包为 SVG Sprite，使其显示实际svg图；svgo-loader 对 SVG 文件进行优化，帮助在构建过程中自动优化 SVG 文件，减小文件大小并提高加载性能。）
2. vue.config.js配置插件(vue3)

const path = require('path');

module.exports = {
  chainWebpack: (config) => {
    // 添加对 SVG 文件的处理规则
    config.module
      .rule('svg')
      .exclude.add(path.resolve(__dirname, 'src/icons')) // 排除 SVG Sprite 文件的目录路径
      .end();

    // 添加对 SVG Sprite 文件的处理规则
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(path.resolve(__dirname, 'src/icons')) // SVG Sprite 文件的目录路径
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      // 获取到 `loader.options` 并进行修改，解决 `this.getOptions is not function` 的错误
      .tap((options) => {
        options = {
          ...options,
          symbolId: 'icon-[name]'
        };
        return options;
      })
      .end()
      .use('svgo-loader')
      .loader('svgo-loader');
  }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31