webpack打包之后，font-awsome路径不对的问题

最新推荐文章于 2022-10-30 11:14:52 发布
转载 最新推荐文章于 2022-10-30 11:14:52 发布 · 1.2k 阅读 · 0

本文探讨了在使用webpack打包Vue项目时遇到的Font Awesome图标显示问题。问题表现为打包后图标不显示，原因是静态资源路径配置错误。文章详细介绍了如何调整webpack配置文件中的loader limit值来修正该问题。

问题描述：

使用webpack打包vue项目，使用font-awsome字体，发现打包之后，font-awsome图标不显示，报错为路径不对

看了下打包的路径，的确路径不对，打包之后font-awsome的文件是存放在static/fonts/下的，而访问的时候static/css/static/fonts/

原因是：

build > webpack.base.conf.js 里面loader的设置

limit值要设置为大一点，至少要比字体文件大

vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
11-19
更改 build/utils.js 文件中 ExtractTextPlugin 插件的options 配置： if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, publicPath: '../../', // 注意配置这一部分，根据目录结构自由调整 fallback: 'vue-style-loader' }) } else { return ['vue-style-loader'].concat(loaders) } 补充知识：webpack打包运行vue项目后找不到.ttf及.w
14.如何解决使用webpack打包之后，font-awsome路径不对的问题，终极解决方法
weixin_30321449的博客
06-22 261
问题描述： 使用webpack打包vue项目，使用font-awsome字体，发现打包之后，font-awsome图标不显示，报错为路径不对 看了下打包的路径，的确路径不对，打包之后font-awsome的文件是存放在static/fonts/下的，而访问的时候static/css/static/fonts/ 原因是： build > webpack.base.conf...
webpack打包font时的路径问题
金海博客
10-27 1390
使用Webpack打包Build时，对于woff、woff2、eot、ttf、otf 这些类型的font文件路径有问题，一般常见的错误路径就是 static/css/static/css/fonts，出现这样的问题，大多数就是配置上的问题，下面来看看正确的配置。 /*webpack.base.conf.js*/ module: { rules: { { ...
如何解决使用webpack打包之后，font-awsome路径不对的问题，终极解决方法
Littleree的博客
09-05 168
如何解决使用webpack打包之后，font-awsome路径不对的问题，终极解决方法
webpack打包font时错误css文件路径导致报错
qq_28687183的博客
09-05 530
打包后，css里加载的font文件路径变成了：rootpath/static/css/static/fonts, 而期望的应该是rootpath/static/fonts。 解决方法：在build/utils的ExtractTextPlugin.extract里加上 publicPath: ‘…/…/’： 原文链接：https://www.jianshu.com/p/458fe9cb3490 // generate loader string to be used with extract text plu
Webpack打包字体font-awesome的方法示例
01-19
使用webpack构建font-awesome或者bootstrap的时候，最常见的一个问题就是构建字体文件的问题。经常会出现无法找到字体文件的问题。下面就讲一下如何正确构建引入字体文件： 1. 首先安装依赖: 代码如下:npm install...
解决vue-cli项目webpack打包后iconfont文件路径的问题
10-18
然而，在实际的项目开发过程中，可能会遇到一些问题，比如在本例中提到的`iconfont`图标文件路径问题。 `iconfont`是一种流行的在线图标服务，允许开发者将图标作为Web字体来使用，从而实现响应式和易于维护的图标...
精选资源
vue解决使用webpack打包后keep-alive不生效的方法
01-21
问题是这样的，我使用webpack的npm run dev运行的时候，keep-alive路由缓存是有效的，但是我npm run build，把文件放到实际的项目中去的时候，会有如下的问题： 路由如下： var menus = [ { path: '/user', name...
webpack4-cdn-plugin:上传 webpack 资源到 cdn，允许重命名散列资源
05-31
webpack4-cdn-插件 将您的 webpack 生成的资产上传到 CDN，允许重命名/重新哈希。 要求和重要说明 Node 8+ （支持async/await ）是必需的推荐。 此插件尚未在Windows平台上进行测试。 此插件仅支持webpack@4 。 ...
webpack配置打包后图片路径出错的解决
08-27
本篇文章主要介绍了webpack配置打包后图片路径出错的解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
webpack-url-loader 解决项目中图片打包路径问题
10-17
主要介绍了webpack-url-loader 解决项目中图片打包路径问题,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue打包字体文件路径错误的问题
四月
10-20 980
转载自https://www.jianshu.com/p/458fe9cb3490 根本原理请看：https://github.com/vuejs-templates/webpack/issues/166 在我的项目中遇到的情形是： 打包后，css里加载的font文件路径变成了：/static/css/static/fonts/element-icons.535877f.woff， 而期望的应该是/static/fonts/element-icons.535877f.woff。 修改方式：在build/.
npm run serve 报错
DongShanYuXiao的博客
10-30 9889
npm run serve报错
webpack打包fonts时错误css文件路径导致报错
mtgr的博客
05-15 1738
项目在公共的css中引用了font-awesome，开发过程中并没有什么问题，在build以后发现路径错误 @import url(./font-awesome.min.css); 原本期望的引用路径是 dist/static/fonts/*** 打包后的实际引用变成dist/static/css/static/fonts/*** 解决方案 在build/utils的ExtractT...
vue全家桶 引入 fontawesome-webfont 打包之后，路径不对
麻球科技
03-23 1279
解决办法：添加：publicPath: '../../'现在重新打包，就可以了
利用webpack打包vue项目后在本地运行资源报404错误
Akony的博客
03-03 6599
利用webpack打包vue项目后在本地运行资源报404错误 解决方法： 打开config文件夹下的index.js，设置assetsPublicPath: ‘./’。
fonts/font-awesome-woff2 404问题
andingran3462的博客
06-06 333
报错环境: 　　vue 开发的项目 　　npm 引入的font-awesome, 页面正常显示，就是控制台会报这个错误 产生原因：因为服务器IIS不认SVG，WOFF/WOFF2 这几个文件类型，只要在IIS上添加MIME类型即可。 解决方法： 　　打开服务器IIS管理器，找到MIME类型。 　　添加MIME类型 添加你缺少的文件扩展类型：　　 ...
webpack5-基础入门-03-修改打包资源路径 处理 图片 字体资源
weixin_40746230的博客
06-07 1425
修改打包资源路径 处理 图片 字体资源
webpack处理iconfont字体文件打包
weixin_45966674的博客
01-27 2013
首先你要先会用iconfont 如果还不会建议观看我的文章 iconfont创建前端图标库 先在我们的文件夹里建一个项目 npm init 根据提示操作 就会生成一个package.json 我们现在项目终端把该引入的东西引入了 npm install webpack webpack-cli --save-dev npm install html-webpack-plugin --save npm install webpack-dev-server --save npm install css
使用webpack打包创建vue-toast插件全攻略
"详解使用webpack打包编写一个vue-toast插件" 在本文中，我们将深入探讨如何使用webpack打包创建一个自定义的Vue Toast插件。Vue Toast插件是一种常见的UI组件，用于显示短暂的通知消息。我们将按照以下步骤进行： ...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值