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');
  }
};
相关推荐
Codelinghu21 分钟前
做后端的我在公司造了一个前端轮子,领导:嘿!你他娘的真是个天才。
前端
小old弟26 分钟前
vue3模板中ref的实现原理
前端·vue.js
招风的黑耳30 分钟前
ElementUI元件库——提升Axure原型设计效率与质量
前端·elementui·axure
Captaincc33 分钟前
用MCP 让Claude控制ChatGPT 4o,自动生成吉卜力风格的分镜
前端·claude·mcp
阿白的白日梦39 分钟前
JSX 元素隐式具有类型 "any",因为不存在接口 "JSX.IntrinsicElements"。ts 无法使用 JSX,除非提供了 "--js
前端·javascript·typescript
amagi60039 分钟前
关于黑马程序员微信小程序案例3-3的静态配置问题
前端
jamison_140 分钟前
文心一言与 DeepSeek 的竞争分析:技术先发优势为何未能转化为市场主导地位?
人工智能·ai·chatgpt·gpt-3·1024程序员节
curdcv_po43 分钟前
React 进阶:useReducer 详解与实战指南
前端
用户4099322502121 小时前
深入掌握FastAPI与OpenAPI规范的高级适配技巧
前端·javascript·后端
东东__net1 小时前
1_vue基本_插件
java·前端·javascript