vue-svg加载程序中的组件定义无效

Question

我想在我的vue中使用svg图像。然而，我一直在我的网站上得到无效的组件定义。我还创建了一个配置文件vue.config.js。然而，尽管我正确地遵循了文档，但同样的错误不断出现。有人能帮我吗？

Navigation.vue

<template>
<header>
<nav class="container">
<div class="branding">
<router-link class="header" :to="{ name:'Home'}">Blog</router-link>
</div>
<div class="nav-links">
<ul>
<router-link class="link" to="#">Home</router-link>
<router-link class="link" to="#">Blogs</router-link>
<router-link class="link" to="#">Create Post</router-link>
<router-link class="link" to="#">Login/Register</router-link>
</ul>
</div>
</nav>
<MenuIcon/>
<transition name="mobile-nav">
<ul>
<router-link class="link" to="#">Home</router-link>
<router-link class="link" to="#">Blogs</router-link>
<router-link class="link" to="#">Create Post</router-link>
<router-link class="link" to="#">Login/Register</router-link>
</ul>
</transition>
</header>
</template>
<script>
import MenuIcon from '../assets/Icons/bars-regular.svg'
export default {
name: 'navigation',
components:{
MenuIcon,
}
};
</script>

vue.config.js

module.exports = {
chainWebpack: (config) => {
const svgRule = config.module.rule('svg');
svgRule.uses.clear();
svgRule
.use('babel-loader')
.loader('babel-loader')
.end()
.use('vue-svg-loader')
.loader('vue-svg-loader');
},
};

Answer 1

您需要将SVG的代码粘贴到以.Vue 结尾的Vue文件中

示例：

../assets/Icons/bars-regular.vue

Answer 2

我通过在vue.config.js中添加此代码解决了问题

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