Vue.js SVG 加载 vuesvgloader； [Vue 警告]：无效的组件定义

发布于05月03日

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

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

以下步骤已经完成:

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

2) 在vue.config.js(根目录)中添加网页包配置:

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作为UI框架)

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

3个问题:

我犯了什么错？
我如何/在哪里可以/应该添加新的网页设置
或者修改/覆盖/删除现有的

在vue cli(V3)项目中？

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

Vue.js SVG 加载 vuesvgloader； [Vue 警告]：无效的组件定义

推荐答案

Vue.js相关问答推荐

Vue CDN的html工作，但v—如果不工作

使用插槽的VUE 3工作台

使用nuxt I18N验证规则消息翻译

如何以惯用的方式触发 vue3 中同级组件的效果？

vue js如何将布尔值传到数据库

如何解决 importers[path] is not a function for clean Vue 3/Vite/Storybook installation

作为props 传递的原始 ref 的 Vue 3 react 性

如何在 v-for 指令切换状态下安全地制作包含附加到对象的复选框的列表(W/O 切换列表中的其他复选框)？

Rails Webpacker 还是 Vue-CLI？

如何使用 v-on：change 将输入文本传递给我的 vue 方法？

如何在 vue.js 2 的其他组件中调用方法？

如何创建 vuetify 工具栏链接下拉菜单？

v-model 不会检测到 jQuery 触发事件所做的更改

等待来自 WDS 的更新信号

为什么我在 vue.js 中得到避免使用 JavaScript 一元运算符作为属性名称？

NUXT如何将数据从页面传递到布局

在 v-for 循环中使用 v-model

从 vue.js 中的 store 获得的计算(computed)属性的设置器

动态更改我的 Vue.js SPA 主题的最佳方式？

您正在运行 Vue 的 esm-bundler 构建