javascript - SVG 加载 vue-svg-loader； [Vue 警告] : Invalid Component definition

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 Config:

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

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

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 个问题:

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

在 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', 
        },
      ],
    }      
  }
};