关于webpack4.x+Vue项目引入mui的tabbar但是图标显示不出来问题解决

最新推荐文章于 2020-11-27 15:52:25 发布

SharaSwift

最新推荐文章于 2020-11-27 15:52:25 发布

阅读量407

点赞数

原文链接：https://blog.csdn.net/weixin_40043172/article/details/88417348

版权

这个相当于是解决了上一篇文章新报错的地方，上一篇我们成功引入了mui.min.css之后，遇到了ttf的问题，当时并没有管，因为好像是没有什么影响，但是！！！后来才发现，tabbar的图标全部都是一个方框，并不是我们引入的该有的图标。

问题在于，ttf文件的loader应该是我们的url-loader而不是之前加载图片的file-loader，所以我们应该新添加一个解析

类似于上图这样，这样我们的图标就可以加载出来了。

嘻嘻嘻，开心！！

希望对大家有帮助！！

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

SharaSwift

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于webpack4.x+Vue项目引入mui的tabbar但是图标显示不出来问题解决

这个相当于是解决了上一篇文章新报错的地方，上一篇我们成功引入了mui.min.css之后，遇到了ttf的问题，当时并没有管，因为好像是没有什么影响，但是！！！后来才发现，tabbar的图标全部都是一个方框，并不是我们引入的该有的图标。问题在于，ttf文件的loader应该是我们的url-loader而不是之前加载图片的file-loader，所以我们应该新添加一个解析类似于上图这样，...
复制链接

扫一扫

vue项目里引入mui.js后里面的tabbar点击切换失效的解决办法

litcangosh的博客

11-30

720

mui这个库问题还真不少。在引入mui.js后，其tabbar在vue项目中点击切换失效，原因是tabbar这个组件的样式类名可能是和min.js冲突了，所以解决办法，就是把其样式的类名重新修改，具体如下：在浏览器中找到所有的class="mui-tab-item"的样式，并把其样式复制到自己定义的style里面，然后修改class="mui-tab-item",并把对应标签上的类名改为和你修...

mui踩坑之旅-mui导入图标不显示

JTz666666的博客

05-13

413

当使用webpack打包处理文件的时候，发现导入的mui图标不显示也不报错，这个问题卡了一个星期，最后发现在main.js导入mui.css后,打包运行就报错,后来发现是.ttf文件没有loader 直接 cnpm i file-loader -D 然后配置webpack.config.js，新增一段这个 { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: "file-loader" } 注意：如果还不成功就看

参与评论您还未登录，请先登录后发表或查看评论

vue cli关于mui自定义图标无法识别问题

weixin_43893437的博客

03-16

359

需要将阿里巴巴矢量库里下载的文件添加到项目的src/assets/font文件夹内，需要如下几个文件然后在main.js中引入iconfont.css就可以正常使用了 import './assets/font/iconfont.css' ...

mui 图标显示不出来解决方案

weixin_45932157的博客

01-22

1792

1.错误显示，可以看到图标显示不出来：原因：mui 是有自己的 icon 图标的他是把小图片存在字体里面然后在用引用字体的方式来读出图标的。我引用了 mui.js之后发现icon 图标是没出来了，原因很简单，我还少放了一个字体文件进行项目。 mui.ttf （mui的字体文件）然后就事放在哪里的问题了直接看图吧也就是说要新建一个跟mui.min.css cs...

vue+webpack项目中引入MUI所碰见的问题

elie_yang的博客

10-19

563

利用webpack搭建的Vue多页应用中，引入mui过程中碰见若干问题，记录如下： mui引入当前未发现npm的方式导入。到官网https://github.com/dcloudio/mui下载zip文件；加压，应用dist目录到自己的项目中；在main.js中引入：使用方式： this.mui.toast("mui test"); 问题1:npm run bu...

解决vue项目中运用mui的Tabbar不能跳转路由的问题

vuex的学习笔记

04-04

886

出现这个是不是很懵逼？我当时也是非常的懵逼，经过多番查找，发现原来是最新谷歌浏览器的一种机制技术分享如下： **手机版加入代码：** 手机版加入这个，是因为如果也用click,会多少出现一些延迟，所以用tap 进行替换 mui(‘body‘).on(‘tap‘,‘a‘,function(){document.location.href=this.href;}) **电脑版加入代码：...

vue 监听路由变化 mint-ui中tabbar遇到的坑

你蠢哭我咯的博客

11-09

8482

监听路由变化改变tabber的值。watch: { $route () { console.log('改变路由') this.selected = sessionStorage.getItem('pageUrl') }, selected: function (val, oldVal) { // 这里就可以通过

vue + webpack + emelent-ui打包后element的小图标不显示

这是我的博客

05-07

8891

由于针对element-ui的组件样式，我引入了element-theme-chalk 样式，下载完依赖后注入的时候，循序为： import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css'; import 'element-theme-chalk'; 导致了在项目打包后element-ui的图标显...

Object_c tabbar菜单栏在切换的时候，颜色变灰的问题

lyz0925的博客

04-14

568

在界面切换的时候，有时候tabbar整条颜色都会变灰，如下：而正常的应该如下：在所有的父类加上： self.navigationController.navigationBar.translucent = NO; 这句代码就好了。貌似是因为： navigationBar 在透明情况下，与contentView会重合一部分区域 navigatinoBar...

微信小程序关于tabBar的底部图标不显示问题

Hero_rong的博客

11-24

3246

如图， list 的顺序，图片，都没有问题，但是底部的 tabbar 图标就是不显示后来发现这里面两个属性，selectedIconPath 和iconPath ，前者是选中，后者是没有选中的，我一开始测试的时候只写了一个属性，就是没有选中的那个属性，所以才没有显示正确写法是要两个都写的，问题不是什么大问题，记录一下，就是想提醒自己，写代码要仔细一点 "list": [{ "pagePath": "pages/list/index", "sele...

使用Webpack打包vue-cli的项目后,字体图标等失效的解决办法

qq_41557320的博客

03-29

1414

找到build文件夹中的这个文件：build/webpack.prod.conf.js module: { rules: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: false, usePostCSS: true }) }, 将extr...

vue init webpack tabbar创建vue项目时出现问题

abcd2923的博客

11-27

195

vue init webpack tabbar创建vue项目时出现问题 vue : 无法加载文件 C:\Users\dengqian\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本。 C:\Windows\System32\WindowsPowerShell\v1.0，找到如上路径，以管理员身份运行powershell.exe即可输入set-ExecutionPolicy RemoteSigned ，选择Y或A即可 ...

vue项目中TabBar标签对应页面不显示问题

青椒的博客

04-20

1697

也不默认显示首页，很头疼，检查路由也有导入最后问题官方文档没找到为什么要这样命名的理由，以后注意一定要写成routes就好了应该是这样的我理解： router：路由器 routes：线路，路由，路径因为我们要在里面写的是TabBar的路径所以就必须写成routes啦！ ...

踩坑之webpack/mui图标只显示方框

Pamela

12-27

581

根据网上找的教程一一改过都不行,最后发现在自己的css中写了以下: /* font-family: sans-serif; */ 注释掉即可

MUI 使用爬坑之路之 tab 多页面操作