SVG加载vue-svg-loader; [Vue警告]:无效的组件定义 [英] SVG loading vue-svg-loader; [Vue warn]: Invalid Component definition

问题描述

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

If I want to use vue-svg-loader in an existing vue-cli application, I get the error message

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

以下步骤已完成:

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

1) Install vue-svg-loader as devDependency

2)在vue.config.js(根目录)中添加Webpack Config:

2) Add Webpack Config in vue.config.js (root directory):

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

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

3) Import SVG and inject as Component

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

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

4)在模板中使用它(称为UI框架)

4) Use it in the template (vuetify as UI-Framework)

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

---

3个问题:

---

3 Questions:

1. 我的错是什么?
2. 如何/应该/应该在哪里添加新的Webpack设置
3. 或修改/覆盖/删除现有的

在vue-cli(V3)项目中?

in a vue-cli (V3) project?

推荐答案

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

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

这篇关于SVG加载vue-svg-loader; [Vue警告]:无效的组件定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！