如果我想在现有的 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 个问题:
- 我的错误是什么?
- 我应该如何/在哪里添加新的 Webpack 设置
- 或修改/覆盖/删除现有的
在 vue-cli (V3) 项目中?
最佳答案
将以下内容添加到 vue.config.js
中:
module.exports = {
chainWebpack: config => {
config.module.rules.delete("svg");
},
configureWebpack: {
module: {
rules: [
{
test: /\.svg$/,
loader: 'vue-svg-loader',
},
],
}
}
};
关于javascript - SVG 加载 vue-svg-loader; [Vue 警告] : Invalid Component definition,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49904540/