|
阅读：11849回复：0
[vue]vue-cli中使用vue-svg-icon ，报Error: TypeError: Cannot read property 'split' of undefined
项目中使用了vue-svg-icon，按照：npm中vue-svg-icon组件使用的文档，
如下链接：https://www.npmjs.com/package/vue-svg-icon 具体步骤如下： 1. 安装 npm install vue-svg-icon --save-dev2. 将svg图片放入src/svg/ 这里安利一个svg图片库iconfont
import Icon from 'vue-svg-icon/Icon.vue';
Vue.component('icon', Icon);4. 在网页中使用icon标签就可以啦！<icon name="chameleon" scale="20"></icon> 问题：但是运行后一直报“[Vue warn]: Error in render: "TypeError: Cannot read property 'split' of undefined"” 解决：网上说是需要下载xml-loader即可，可是下载后，还是不能解决，最后查看了组件的源文件，“ vue-svg-icon/Icon.vue” 发现如下代码： const t = xml.svg.$.viewBox.split(' ');在此代码最后使用了split方法，估计就是这里报错。console.log(xml.svg.$.viewBox)，发现输出为undefined, undefined肯定没有split方法，所以报错了。最后，分析了变量t在文中的使用，只是获取宽度与高度，分析了下xml.svg.$发现里有width与height,故将代码改为如下： const t = xml.svg.$;
return {
width: t.width,
height: t.height,
paths: convert.SVGtoArray(xml.svg)
}然后，可以正常使用，但是高度与宽度在自己在html中设置，如下：<icon name="chameIeon" width="128" height="128" ></icon>即可，正常使用。 算是解决了这个问题，如果你有更好的方法，欢迎分享：） |
|
|
公众号
