SVG 加载 vue-svg-loader； [Vue 警告]：无效的组件定义答案

【问题标题】：SVG loading vue-svg-loader; [Vue warn]: Invalid Component definitionSVG 加载 vue-svg-loader； [Vue 警告]：无效的组件定义
【发布时间】：2018-09-28 23:32:42
【问题描述】：

如果我想在现有的 vue-cli 应用程序中使用vue-svg-loader，我会收到错误消息

[Vue warn]: Invalid Component definition: /img/logout.b0c3dfb7.svg

以下步骤已经完成：

1) 安装 vue-svg-loader 作为 devDependency

2) 在vue.config.js（根目录）添加Webpack Config：

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.svg$/,
          loader: 'vue-svg-loader', 
        },
      ],
    }      
  }
};

3) 导入 SVG 并作为组件注入

import Logout from '@/assets/img/icons/logout.svg';

export default {
    components: {
      Logout,
    },
...
}

4) 在模板中使用（vuetify as UI-Framework）

<v-btn icon @click="logout()">
    <Logout class="icon" />
</v-btn>

3 个问题：

我的错误是什么？
如何/在哪里可以/应该添加新的 Webpack 设置
或修改/覆盖/删除现有的

在 vue-cli (V3) 项目中？

【问题讨论】：

你确定在你的 webpack 管道中没有其他处理 svg 的加载器吗？默认的 vue 项目使用 fileloader 加载文件
是的，我想使用vue-svg-loader 而不是file-loader，并且我想在 SVG 的情况下绕过它，.. 我可以/应该如何以及在哪里这样做？
你看过这个 GiHub 问题吗？ github.com/visualfanatic/vue-svg-loader/issues/1
@zero298 当然，但这是一个老问题和老 vue，..
你应该可以像这样删除现有的加载器github.com/vuejs/vue-cli/issues/1045

标签： javascript svg webpack vue.js vuejs2

【解决方案1】：

将以下内容添加到vue.config.js：

module.exports = {
  chainWebpack: config => {
    config.module.rules.delete("svg");
  },
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.svg$/, 
          loader: 'vue-svg-loader', 
        },
      ],
    }      
  }
};

【讨论】：

【解决方案2】：

在 webpack.base.conf.js 的规则下添加如下代码：

 {
    test: /\.svg$/,
    loader: 'vue-svg-loader',
  }

并从现有的以下规则中删除 svg：

{
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
 }

【讨论】：

请考虑这个项目是通过@vue/clı 创建的
是的，你可以@Lonely，但是如果项目不是使用@vue/Cli 创建的，而是通过webpack 支持创建的。
你可能已经读过，它是关于一个 vue-clı-project ?