vue3 antdesign组件,vue加antdesign组件

直接使用的时候会报错:

图片解析不出来还是svg源文件代码
项目启动报错

vue3使用的时候普通配置会出现this.getOptions is not function错误 Webpack 版本升级引起的在较新的 Webpack 版本中this.getOptions 方法已被移除。

以上错误解决及配置方法

安装npm install svg-sprite-loader svgo-loader --save-devsvg-sprite-loader 解析 SVG 文件将其打包为 SVG Sprite使其显示实际svg图svgo-loader 对 SVG 文件进行优化帮助在构建过程中自动优化 SVG 文件减小文件大小并提高加载性能。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);  }};