vue 不识别svg_vue中引用svg,vue引入svg不显示,vue引用svg配置,vue3.0+ts如何配置svg...
注意:
如果按照下面配置正确发现svg依然无法显示可能s'v'g-sprite-loader的版本过高,重新指定版本下载npm i svg-sprite-loader@3.8.0 --save-dev, 就可能正确显示svg。(vue3.0应该是没有这个问题的)
还有就是可能是创建的icons不在src根目录(最开始我尝试在assets中创建文件来装svg图标,但是并没有显示,换到根目录就正常了,具体应该是那里还是有点问题,按道理讲应该是放到assets中也是可以的以后空了研究暂时这样)
一、安装svg加载插件: npm i svg-sprite-loader -D
二、定义svg组件
export default {
name: 'icon',
props: {
name: {
type: String,
default: 'home'
}
},
computed: {
iconName () {
return `#icon-${this.name}`
}
}
}
svg {
fill: currentColor;
overflow: hidden;
}
默认属性设置可以根据自己需要设定。
三、在src根目录创建装svg的文件夹并创建index.js文件
文件结构
index.js内容
import Vue from 'vue'
import Icon from '@/components/icon'
Vue.component('icon', Icon)
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./', false, /\.svg$/)
requireAll(req)
这个文件没有什么需要处理的基本都是这样写,如果对requireContext不是很理解可以google一下这个requireContext()就知道了。
四、main.js中全局引用组件
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import './common/common.scss'
import '@/icons'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: ''
})
五、webkit.base.conf.js规则修改:
添加这部分规则:
{
test: /\.svg$/,
loader: 'svg-sprite-loader',
include: [resolve('src/icons')],
options: {
symbolId: 'icon-[name]'
}
}
修改规则:
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
exclude: [resolve('src/icons')],
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
完成,现在可以全局调用:
Vue3.0+ts配置(不用ts的话就和2.x相同只是规则写法有点不同,可以直接参考规则写法)
vue3.0+ts无法使用Vue.component(),所以index.ts文件内容有点不同这里直接上代码
index.ts
3.0 版本是可以将svg图片放到assets里面到
然后是main.ts中全局注册
main.ts文件
还有基本配置,3.0是链式配置,并且需要先清楚掉默认到svg规则,不清除是不生效的,(还有是写在vue.config.js的,自己建的文件)
chainWebpack: config => {
const svgRule = config.module.rule('svg')
svgRule.uses.clear()
svgRule
.test(/\.svg$/)
.include.add(resolve('./src/assets/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.tap(options => {
options = {
symbolId: 'icon-[name]'
}
return options
})
}
其它基本是和2.x相同的
vue 不识别svg_vue中引用svg,vue引入svg不显示,vue引用svg配置,vue3.0+ts如何配置svg...相关推荐
- vue 前端显示图片加token_前端Vue3.0:从0到1手把手撸码搭建管理后台系统
第1节 – 了解项目开发流程 手把手撸码前端 – 第1学时 了解产品从0到1的开发流程,产品经理.UI设计师.研发部.测试工程师 第2节 – 构建vue项目.代码仓库管理 手把手撸码前端 – 第2学时 ...
- vue 不识别svg_vue配置svg 图标显示不出来
组件: props: { iconClass: { type: String, required: true }, className: { type: String } }, computed: { ...
- vue3.0+ts 找不到模块“./XXX.vue”或其相应的类型声明。
报错原因是:typescript 只能理解 .ts 文件,无法理解 .vue文件 因此需要给.vue文件加上类型说明文件 解决方法:在项目根目录或 src 文件夹下创建一个后缀为 .d.ts 的文件, ...
- IE浏览器解决无法识别js中getElementsByClassName问题
关于ie浏览器无法识别js中getElementsByClassName问题,现通过以下方法,引用如下js /***打印js对象详细信息*/ function alertObj(obj) {var d ...
- 我来说说 Vue面试知识点 和 Vue3.0
昨天文章刚说了React的重要性和为何流行,今天北妈带你回归Vue,云里雾里.懵不懵逼都在你自己,反正无论如何,这一年我会疯狂的让大家学习,催促自己和你们一起学习,并且一起参与其中. 入正题 一 昨天 ...
- vue3.0找不到模块“./App.vue”或其相应的类型声明。
// vue3 报错提示 找不到模块"./XXX.vue"或其相应的类型声明 // 报错原因:typescript 只能理解 .ts 文件,无法理解 .vue文件 //报错原因:j ...
- TypeScript及TypeScript在vue3.0项目中的基本使用
一. TypeScript是什么 TypeScript 是一种由微软开发的自由开源的编程语言,主要提供了类型系统和对 ES6的支持.它是JavaScript的一个超集,扩展了JavaScript的 语 ...
- vue项目中使用阿里iconfont图标(下载并在本地引用)
vue项目中使用阿里iconfont图标(下载并在本地引用) step1 step2 step3 在scr/asstets/css目录下新建icons文件夹,把图中所需要的四个文件放进去即可 记得在m ...
- vue 公用页面引用_vue中实现部分页面引入公共组件
前言 我们可以把公共组件放到App.vue中,但是有时候我们希望某个页面不需要这写公共部分,那么需要怎么设置呢? 本文为大家介绍三种部分页面引入公共组件的方法. 方法一:利用子路由 创建一个layou ...
最新文章
- 域名解析对网站SEO优化有何影响?
- 如何用FineReport制作一张报表(一)
- python找出只出现一次的数字_【LeetCode 136】只出现一次的数字(Python)
- linux 静态库、共享库
- 【C++】C++中你不了解的类型转换
- Jmeter学习(一)
- Qt qtextstream读取文件
- 【分享】“飞鹅打印机“ 在集简云平台集成应用的常见问题与解决方案
- matlab 对称矩阵特征值为负数,【原创】古典Jaccobi方法计算实对称矩阵A的特征值和向...
- 训练集和测试集样本分布一致性的判断方法
- 推荐10个我在用的Chrome浏览器插件
- 远程访问SOAP协议接口
- 诺手c语言教程,《云顶之弈》黑夜使者阵容运营技巧 黑夜使者怎么玩
- MongoClient添加连接配置信息
- 银企直连增加支付货币的配置方法 :事务FBZP
- 【算法】分治策略:芯片测试
- 《CCNP安全Secure 642-637认证考试指南》——2.3节入侵者动机
- ilitek win10 触摸屏驱动_德国布拉本达(Brabender)触摸屏维修常见故障_触摸屏维修吧...
- 利用Python+opencv进行视频文件的读取和保存,打开笔记本摄像头拍照保存、图像在窗口显示等操作
- 51nod 1830
热门文章
- 【PAT乙级】1031 查验身份证 (15 分)
- 【PAT乙级】1025 反转链表 (25 分)
- 4.1.8 文件保护
- Spring boot修改员工
- Freemarker整合Spring
- eclipse全局搜索_Eclipse如何进行全局搜索和单页面搜索?
- 推荐一些冷门但是超级实用的工具
- 一分钟带你玩转 Spring IoC
- “365算法每日学计划”:01打卡
- Dubbo错误排查:com.alibaba.dubbo.rpc.RpcException: Invoke remote method timeout