vue引入iconfont；解决These relative modules were not found和小方块问题

最新推荐文章于 2022-08-30 10:23:46 发布
最新推荐文章于 2022-08-30 10:23:46 发布
阅读量2.8k 收藏 3
点赞数
分类专栏： vue.js 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lcl_key/article/details/107434958
版权

vue引入iconfont

一、下载

把项目下载到本地
在这里插入图片描述
在main.js引入import '@/assets/icon/iconfont.css';
在这里插入图片描述
在这里插入图片描述

二、These relative modules were not found:问题
  • ./iconfont.eot?t=1595073977738 in ./node_modules/css-loader/dist/cjs.js??ref–6-oneOf-3-1!./node_modules/postcss-loader/src??ref–6-oneOf-3-2!./src/assets/icon/iconfont.css
    莫名报错…
    找不到该模块。。。。。
    打开iconfont.css发现…在这里插入图片描述
    路径不对；我的是在iconfont目录下的；然后修改一下
    在这里插入图片描述
三、小方块问题

莫名变成小方块了；
在这里插入图片描述
仔细一开才发现是打错字母了…尴尬
改正之后就可以了
复制代码可以获得图标的代码 ‘&#xe653’
在这里插入图片描述

<i class="iconfont">&#xe653;</i>
<i class="iconfont">&#xe60c;</i>

在这里插入图片描述
如果有什么问题或者是bug都可以在评论区留言；不喜勿碰

暴躁的key_LCL
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用iconfont出现错误These relative modules were not found: * ./.iconfont.svg?t=1586...解决方法
代码海中一粒米
04-10 1951
在iconfont阿里的矢量图库中下载矢量图后运用在自己的项目时候，发现怎么运行都出现提示找不到相关文件的错误，提示如下图： 后来发现在引入的时候是没有对iconfont.css中文件对相关的路径进行更改 没更改之前： 根据自己的路径对文件进行更改之后： 希望可以帮助同样踩坑的前端小白们 ...
报错These relative modules were not found:
freya_Du的博客
01-16 1万+
当你出现这种报错报错的时候 These relative modules were not found: * ../http/api in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--...
Vue:These relative modules were not found
Alanrnzearn的博客
05-31 6518
       Vue框架总是不断更新所以在学习过程中也会经常容易出现一些小错误而导致无法实现一些相关操作。尤其是正在学习的新手，是经常且很容易因为疏忽而踩坑的。以下将针对Vue的学习过程中出现的一些踩坑雷区进行适当的汇总吧。 1. These relative modules were not found:         出现这个问题时应该是意味着你的在进行
These relative modules were not found:报错解决办法：
qq_37143787的博客
12-16 7万+
使用npm run dev时，终端报如下错误： 错误： ERROR  Failed to compile with 3 errors 错误翻译：编译失败有3个错误   错误  :These relative modules were not found: 错误翻译：  没有找到这些相关模块 错误分析： 1.node_modules：文件下缺少package.json导入的文件依赖包...
vue引入iconfont 报错 vue-cli引入iconfont报错These relative modules were not found: ./iconfont/iconfont.eot?t
蓝胖子的博客
02-21 2338
* ./iconfont.ttf?t=1645407420543 in ./node_modules/css-loader??ref--6-1!./node_modules/postcss-loader/lib??ref--6-2!./src/assets/icons/iconfont.css * ./iconfont.woff2?t=1645407420543 in ./node_modules/css-loader??ref--6-1!./node_modules/postcss-loader/lib
三、webpack的基本使用，loader，css文件处理（Mhua）
zmh_984983444的博客
08-04 530
style-loader插件默认是将 样式 加载到 html文件的 head标签之前，mini-css-extract-plugin插件能够将所有css放到。开始打包，控制台出现报错信息，这是因为没有在 webpack.config.js文件进行配置。在 webpack.config.js 配置 css-loader 处理 css 文件。在入口文件 index.js 引入 style.css 文件。在入口文件index.js，导入style.less文件。配置webpack.config.js文件。...
Vue中"This dependency was not found"问题的解决方法
08-27
"Vue中"This dependency was not found"问题的解决方法" Vue 中的"This dependency was not found"问题是指在使用 Vue 框架进行开发时，无法找到依赖项的情况。这类问题常见于编译时，控制台会报错，表示无法找到...
Vue中”This dependency was not found”问题的解决方法
12-10
在开发过程中，理解Webpack的模块解析机制和配置是非常重要的，它可以帮助我们更好地理解和解决问题，提高开发效率。对于初学者，参考官方文档和社区资源也是获取帮助的有效途径。希望这篇文章能对你有所帮助，如果...
vue项目引入Iconfont图标库的教程图解
10-17
在Vue项目中，引入Iconfont图标库是一种常见的实践，特别是在Element UI等前端框架无法满足所有图标需求时。本文将详细讲解如何将Iconfont图标库整合到Vue项目中，以实现自定义图标的需求。 首先，你需要访问阿里...
解决vue-cli项目webpack打包后iconfont文件路径的问题
10-18
在Vue CLI项目中，我们通常会将`iconfont`的CSS样式和字体文件引入到项目中。然而，当使用`webpack`进行打包时，由于文件路径的处理方式，可能会导致打包后的CSS文件引用的字体文件路径错误，从而在生产环境中无法...
网络书签工具Mtab书签私有部署代码
最新发布
10-08
在这个信息爆炸的时代，难道你不希望有一个能够轻松解决你多端、多浏览器的收藏和笔记同步问题的神奇工具吗？别再纠结了！Mtab书签已经为你准备好了 Mtab书签是一款集基础导航、记事本、在线小工具和多端同步于一身的顶级应用。它不仅可以简化你的网络浏览体验，还能提供更多功能，解决你的多端同步之忧。 跨设备同步：不再为了在不同设备上找不到书签或笔记而苦恼。Mtab书签让你的浏览历史、收藏网址和重要笔记在所有设备上同步。从手机到平板，从PC到Mac，都能轻松访问你需要的信息。 跨浏览器支持：你在使用不同浏览器吗？不用担心，Mtab书签支持所有主流浏览器。Chrome、Firefox、Edge、Safari，无论你的选择是什么，都能在一应俱全的工具箱中找到你的书签和笔记。 多功能一体：Mtab书签不仅仅是一个书签工具，它还提供了一个实用的记事本功能，让你随时随地记录想法、灵感和待办事项。此外，它还内置了一些在线小工具，解决您的日常工作问题。 私有部署：你可以将它部署在自己的服务器上,数据自己掌控。 部署教程：https://blog.mtab.cc/app/119.html
Vue框架下引入ActiveX控件的问题解决
10-17
主要介绍了Vue框架下引入ActiveX控件的问题解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
import报错These relative modules were not found，这是忘了写文件后缀
【03】的博客
02-05 593
首先排除导入导出路径错误 我的项目代码（错误示例） 以上代码，看起来确实没啥问题，结果却报错了 问题解决 该问题是没有加.jsx文件后缀导致的 //将 import RouterConfig from './router/RouterConfig'; // 写上后缀 import RouterConfig from './router/RouterConfig.jsx'; 更好的解决方法 配置webpack自动寻找后缀 在webpack.config.js加上以下配置即可 resolve: .
vue本地代码 Module not found 问题
会一点前端、会一点Java、会一点Python
08-30 8508
vue项目在windows系统能够成功build，但放到流水线打包时，直接报错。
vue文件如何引入icon图标并使用
weixin_45899022的博客
02-11 2932
1、进入阿里矢量图标库https://www.iconfont.cn.并登录 2、选择自己需要的图标并加入购物车 3、选完后点击右上角的购物车图标，点击“添加至项目”，点击后会跳到所属的项目，选择“Font class”,然后点击“下载至本地” 4、下载完后，解压，改文件名为“icon” 5、然后把icon文件复制到vue项目的assets目录 6、在main.js全局引入iconfont...
vue项目中导入icon字体文件出现This relative module was not found:* ./iconfont.eot?t=1523541245904
Diandaoweizhi1的博客
06-06 959
报错提示： This relative module was not found: *./iconfont.eot?t=1523541245904 in ./node_modules/css-loader/dist/cjs.js??ref–6-oneOf-3-1!./node_modules/postcss-loader/src??ref–6-oneOf-3-2!./src/assets/fonts/iconfont.css 错误原因： fonts文件中缺少iconfont.eot文件 解决方法： 向fo
VUE项目，文件路径正确，但是This relative module was not found
热门推荐
默默的笔记
03-20 9万+
这个人她一直会犯一些让人很郁闷的问题。 今天在用VUE编写项目，发生了This relative module was not found， 百度搜索出来的解决方案都是让我检查我的文件路径， 如果你觉得你这个文件的路径是正确的，该写的都有写，那就 npm install 如果你npm install 之后问题还是没有解决，那我告诉你，肯定还是在文件路径哪里！！！ 下面记录一下遇到这个问题之后...
前端开发：项目引入vue-easytable时报错These relative modules were not found：的解决方法
软贱开发攻城狮
07-16 3006
前言 前段时间在开发基于移动端的前端项目的时候，遇到一个使用table的需求，但是基于移动端的Vant框架的组件库里面没有table相关的组件支持，这就需要借助第三方组件来实现基于移动端的table功能。基于移动端的table的第三方组件有一个使用起来比较方便的组件：vue-easytable，该组件从集成到使用也都很简单，但是会遇到一个致命的问题，那就是本文所要分享的内容。 关于vue-easytable组件从集成到使用的方法，网上一大把教程，vue-easytable在git上面也有demo，可
vue的鼠标事件
lcl_key的博客
07-10 1万+
1. mouseenter ：进入 2. mouseover：在 3. mousemove：移动 4. mouseout：移出 5. mouseleave：离开 6. click：单击 7. mousedown：按下鼠标 8. mouseup：松开鼠标 9. dblclick：双击
These relative modules were not found:
07-27
These relative modules were not found指的是在VUE项目中引用的相对模块未找到的错误。根据引用\[1\]和引用\[2\]的描述，这个错误通常是由于文件路径错误导致的。解决这个问题的方法是按照链接中提供的排查步骤逐个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值