SVG 加载 vue-svg-loader; [Vue 警告]:无效的组件定义

Posted

技术标签:

【中文标题】SVG 加载 vue-svg-loader; [Vue 警告]:无效的组件定义【英文标题】:SVG loading vue-svg-loader; [Vue warn]: Invalid Component definition 【发布时间】: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 【参考方案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 ?

以上是关于SVG 加载 vue-svg-loader; [Vue 警告]:无效的组件定义的主要内容,如果未能解决你的问题,请参考以下文章

VueJS根据for循环中的变量加载SVG文件,使用v-html给出[object Module]

SVG 相互覆盖 CSS 样式

嵌入的 svg 何时实际加载,我如何检查它是不是已加载

SVG 动画在 Safari 13.1 (Mac OS & IOS) 中遇到问题

SVG 无法在 Firefox 上加载

svg - 使用 css 更改 svg 颜色并加载外部精灵