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)
javascript 复制代码
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');
  }
};
相关推荐
ps_xiaowang19 分钟前
React Query入门指南:简化React应用中的数据获取
前端·其他·react native·react.js
知识分享小能手31 分钟前
微信小程序入门学习教程,从入门到精通,微信小程序开发进阶(7)
前端·javascript·学习·程序人生·微信小程序·小程序·vue3
叫兽~~1 小时前
vite vue 打包后运行,路由首页加载不出来
vue.js·vue
sophie旭2 小时前
一道面试题,开始性能优化之旅(8)-- 构建工具和性能
前端·面试·性能优化
市民中心的蟋蟀2 小时前
第三章 钩入React 【上】
前端·react.js·架构
Holin_浩霖3 小时前
为什么typeof null 返回 "object" ?
前端
PanZonghui3 小时前
Zustand 实战指南:从基础到高级,构建类型安全的状态管理
前端·react.js
PanZonghui3 小时前
Vite 构建优化实战:从配置到落地的全方位性能提升指南
前端·react.js·vite
_extraordinary_3 小时前
Java Linux --- 基本命令,部署Java web程序到线上访问
java·linux·前端
用户1456775610373 小时前
推荐一个我私藏的电脑神器:小巧、无广、功能强到离谱
前端