Question

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

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

已完成以下步骤：

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

2）在vue.config.js（根目录）中添加Webpack配置：

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）项目中？

Answer 1

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

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

Answer 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]')
    }
 }

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

2 个答案: