SVG 加载 vue-svg-loader; [Vue 警告]:无效的组件定义
Posted
技术标签:
【中文标题】SVG 加载 vue-svg-loader; [Vue 警告]:无效的组件定义【英文标题】:SVG loading vue-svg-loader; [Vue warn]: Invalid Component definition 【发布时间】:2018-09-28 23:32:42 【问题描述】:如果我想在现有的 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 并作为组件注入
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) 项目中?
【问题讨论】:
你确定在你的 webpack 管道中没有其他处理 svg 的加载器吗?默认的 vue 项目使用 fileloader 加载文件 是的,我想使用vue-svg-loader
而不是file-loader
,并且我想在 SVG 的情况下绕过它,.. 我可以/应该如何以及在哪里这样做?
你看过这个 GiHub 问题吗? github.com/visualfanatic/vue-svg-loader/issues/1
@zero298 当然,但这是一个老问题和老 vue,..
你应该可以像这样删除现有的加载器github.com/vuejs/vue-cli/issues/1045
【参考方案1】:
将以下内容添加到vue.config.js
:
module.exports =
chainWebpack: config =>
config.module.rules.delete("svg");
,
configureWebpack:
module:
rules: [
test: /\.svg$/,
loader: 'vue-svg-loader',
,
],
;
【讨论】:
【参考方案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]')
【讨论】:
请考虑这个项目是通过@vue/clı 创建的 是的,你可以@Lonely,但是如果项目不是使用@vue/Cli 创建的,而是通过webpack 支持创建的。 你可能已经读过,它是关于一个 vue-clı-project ?以上是关于SVG 加载 vue-svg-loader; [Vue 警告]:无效的组件定义的主要内容,如果未能解决你的问题,请参考以下文章
VueJS根据for循环中的变量加载SVG文件,使用v-html给出[object Module]