Vue项目使用vue-svg-loader时出现Invalid Component definition错误求助

1. 确认安装必需依赖 #

首先确保已安装vue-svg-loader，如果未安装，执行以下命令：

npm install vue-svg-loader --save-dev
# 或使用yarn
yarn add vue-svg-loader --dev

注：babel-loader通常Vue CLI项目默认已包含，若缺失可一并安装。

2. 修正vue.config.js配置 #

你的当前配置可能未完全覆盖默认SVG处理规则，建议修改为针对指定目录的SVG进行处理，避免影响全局SVG文件：

const path = require('path')

module.exports = {
  chainWebpack: config => {
    // 清除默认的SVG处理规则
    config.module.rule('svg').uses.clear()
    
    // 为自定义图标目录创建新的SVG规则
    config.module
      .rule('svg-icon')
      .test(/\.svg$/)
      .include.add(path.resolve(__dirname, 'src/assets/Icons')) // 指定你的SVG存放目录
      .end()
      .use('vue-svg-loader')
      .loader('vue-svg-loader')
      // 可选：添加svgo优化配置，比如移除默认fill属性方便自定义颜色
      .options({
        svgo: {
          plugins: [{ removeAttrs: { attrs: 'fill' } }]
        }
      })
  }
}

3. 检查SVG文件与导入路径 #

• 验证../assets/Icons/bars-regular.svg路径是否正确，文件确实存在且能在浏览器正常打开（确认是有效的SVG格式）。
• 检查SVG文件内部是否有语法错误，比如未闭合标签、无效属性等。

4. 其他排查步骤 #

如果以上操作后仍报错，可尝试：

• 清除依赖并重新安装：rm -rf node_modules && npm install
• 重启开发服务器并清除webpack缓存（可手动删除node_modules/.cache目录）

内容的提问来源于stack exchange，提问作者Gavin Teo Juen