本文介绍了SVG 加载 vue-svg-loader;[Vue 警告]:组件定义无效的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如果我想在现有的 vue-cli 应用程序中使用 vue-svg-loader
,我会收到错误消息
If I want to use vue-svg-loader
in an existing vue-cli application, I get the error message
[Vue warn]: Invalid Component definition: /img/logout.b0c3dfb7.svg
以下步骤已经完成:
1) 安装 vue-svg-loader
作为 devDependency
1) Install vue-svg-loader
as devDependency
2) 在vue.config.js
(根目录)中添加Webpack Config:
2) Add Webpack Config in vue.config.js
(root directory):
module.exports = {
configureWebpack: {
module: {
rules: [
{
test: /.svg$/,
loader: 'vue-svg-loader',
},
],
}
}
};
3) 导入 SVG 并作为组件注入
3) Import SVG and inject as Component
import Logout from '@/assets/img/icons/logout.svg';
export default {
components: {
Logout,
},
...
}
4) 在模板中使用(vuetify 为 UI-Framework)
4) Use it in the template (vuetify as UI-Framework)
<v-btn icon @click="logout()">
<Logout class="icon" />
</v-btn>
3 个问题:
3 Questions:
- 我的错误是什么?
- 我如何/在哪里可以/应该添加新的 Webpack 设置
- 或修改/覆盖/删除现有的
在 vue-cli (V3) 项目中?
in a vue-cli (V3) project?
推荐答案
在vue.config.js
中加入:
module.exports = {
chainWebpack: config => {
config.module.rules.delete("svg");
},
configureWebpack: {
module: {
rules: [
{
test: /.svg$/,
loader: 'vue-svg-loader',
},
],
}
}
};
这篇关于SVG 加载 vue-svg-loader;[Vue 警告]:组件定义无效的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!