vue-cli打包后iconfont路径问题

最新推荐文章于 2024-05-31 16:23:29 发布
原创 最新推荐文章于 2024-05-31 16:23:29 发布 · 2.3k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue-cli #npm run build

本文介绍了一次使用Vue进行项目开发时遇到的图标路径问题及其解决方案。通过修改build/utils.js中的publicPath设置为'../../'，成功解决了打包后图标显示异常的问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

第一次做vue的项目，记录一下遇到的问题以及解决方法，用npm run build打包项目之后发现iconfont引用的文件路径不对，在网上查找资料后，找到了解决方法：

找到build下面的utils.js文件，如图所示位置加上publicPath: '../../'这句即可解决问题。


vue-cli3+技术栈实战完整笔记（一）
斗师——Ace
10-06 3784
添加小程序，兑换各种视频教程/数据资源。 0. 基于vue ui创建vue cli3.0项目：参考：https://blog.youkuaiyun.com/qq_42231156/article/details/82343793。 1.项目文件vueCli3.0下： pulic文件下：favicon.ico是网址上方标题的的小图标。 index.html：是入口文件。 s...
详解Vue+elementUI build打包部署后字体图标丢失问题
10-15
在Web开发中，使用Vue和Element UI进行项目构建时，打包部署后经常会遇到字体图标丢失的问题，这主要是因为在构建过程中对资源路径处理不当导致的。本文将详细解析Vue项目中使用Element UI时，如何解决打包部署后的...
打包vue项目,iconfont路径不对
baidu_39212797的博客
04-21 1452
在build/util.js文件中，以下位置添加公共路径publicPath:‘…/…/’ if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', **publicPath:'../../'** }) } else { return ['vue-style-loader
关于vue-cli打包后iconfont路径不对问题
VirgoYellow 的专栏
09-12 839
昨天遇到个问题，将 vue 项目（利用 vue-cli 构建的项目，版本是 2.x）打包后，别人在部署的时候发现项目里面图标显示异常，从控制台看，是 iconfont 路径不对。小白的我赶紧拿出小本本做笔记，解决办法如下： 在 build/utils.js 文件中，如下位置添加公共路径属性：publicPath: '../../' ...
vue-cli项目webpack打包后iconfont文件路径问题解决
热门推荐
qq_33203555的博客
01-11 1万+
在使用vue-cli创建vue项目时，可以自动生成webpack文件。使用 npm run build 即可打包发布生产文件，打包后的文件 可以看到使用url-loader处理后的文件是在static目录下生成fonts目录下的文件。全部样式文件打包在css目录下app.hash.css文件中。 但我们会发现发布后，会存在字体文件找不到的问题，查看css文件发现是iconfont字
vue打包后.woff字体文件路径问题处理
a82022424的博客
06-11 1281
在执行npm run build 命令打包后，如果出现 .woff 等字体文件找不到的情况 通过设置vue-style-loader 打包前缀路径解决 转载于:https://www.cnblogs.com/fanlu/p/11002744.html...
解决vue-cli项目webpack打包后iconfont文件路径的问题
10-18
在Vue.js开发中，使用Vue CLI创建的项目通常会依赖Webpack进行构建和打包。Webpack是一个模块打包工具，它能够将JavaScript、CSS、图片等资源文件转换并整合到一起，生成适合部署到生产环境的静态资源。然而，在实际...
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
12-13
做vue项目使用的iviewUI库，打包上线之后发现icon都不显示，然后做了很多尝试，更改打包路径等，都没有太好的效果，最后还是在网上找到了方法： 1. 方法一： 在build/utils.js下面找到这段代码，将其中publicPath...
taro-iconfont-cli:在Taro框架中使用iconfont图标，支持多端，支持多色彩，不依赖字体
05-02
taro-iconfont-cli 在Taro框架中使用iconfont图标，不依赖字体，支持多色彩。 支持平台 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序 H5 特性 1、一键生成标准组件，多端支持 2、使用方便，import即可 3...
Vue+elementUI build打包后字体图标丢失问题
小破孩的博客
06-03 5605
使用Vue+elementUI搭建项目npmrunbuild打包后字体图标丢失，报错如下： 解决办法： webpack utils.js 修改：（build目录下utils.js） 添加 publicPath: '../../' if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, f...
vue-cli搭建的项目如何去掉vue默认的favicon.ico
MISS_zhang_0110的博客
05-31 1967
在 public/index.html 中去除 favicon 链接：打开 public 目录中的 index.html 文件，在 标签中寻找类似如下的代码，通过以上步骤，您可以成功移除 Vue CLI 项目中的 favicon.ico 并使用浏览器默认图标。使用浏览器默认图标：如果您想使用浏览器默认图标（比如 Google 默认图标），在 index.html 的 标签中。这样就会告诉浏览器不要加载任何特定的 favicon.ico 文件，从而使用浏览器的默认图标。
npm run build后网页加载不出来或者icon图标不显示
weixin_49166082的博客
11-17 418
修改 build/utils.js 中的代码，加入 publicPath: '../../'，注意在上一行加一个“，”项目中找到config/index.js文件，将assetPublicPath的路径改为“./”。npm run build后网页一直加载但不显示页面。如果上一步修改后icon图标不显示了。
webpack处理iconfont字体文件打包
weixin_45966674的博客
01-27 1977
首先你要先会用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
[已解决]electron-builder vue 打包后iconfont/element-ui字体图标不显示问题
张小斌
05-27 9357
element-ui字体图标无效是因为文件引用路径错误，将其样式资源作为静态资源打包，就可以解决。
vue 中打包iconfont 出错问题！！！
zjw0742的博客
06-20 5074
在vue框架中引入了阿里的图标库iconfont 但是打包后文件路径不对导致图标显示不出来。之后再vue-cli的webpack打包文件中修改一行配置： 添加一行publicPaht：‘../../’
vue,打包完以后出现的问题，element的icon图标找不到，文件，图片路径问题等
浩星
06-13 1万+
在vue打包完，发现很多问题，来整理下： 第一：使用element框架的icon时候，开发环境下是没有问题的，打包完以后出现小方块，页面不显示， 解决办法：找到utils.js文件，加publicPath: '../../' function generateLoaders (loader, loaderOptions) { const loaders = options.u...
解决vue-cli+iview项目打包上线之后图标不显示问题
Linho的博客
10-15 1131
做vue项目使用的iviewUI库，打包上线之后发现icon都不显示，然后做了很多尝试，更改打包路径等，都没有太好的效果，最后还是在网上找到了方法： 1. 方法一： 在build/utils.js下面找到这段代码，将其中publicPath改成…/…/，保存并重新打包。注意：这个路径不是绝对的，根绝自己的目录结构来写 // Extract CSS when that option is spec...
在项目中使用iconfont图标(在线使用)
JCAL123的博客
08-14 2791
1、进入到阿里巴巴矢量图官网（https://www.iconfont.cn）搜索你想要的图标并加入项目中，如下图我的项目，项目名highway，已经添加了三个图标。 2、点击Font class 复制链接//at.alicdn.com/t/font_762989_mp02u09qt.css（注意，粘贴的时候前边加上http:）,粘贴到你的项目link里，如下所示 <link re...
These relative modules were not found: * ../../assets/fonts/iconfont.eot?t=1561620103869 in ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/tQuicksearch/src/quicksearch.vue?vue&type=style&index=0&id=3068f2ec&lang=scss&scoped=true 报错信息是这样的
最新发布
03-12
<think>好的，我现在需要解决用户在Vue项目中遇到的加载字体文件时模块未找到的问题。用户提到错误涉及css-loader、vue-loader、iconfont.eot以及webpack配置。首先，我得回忆一下Vue项目的Webpack配置结构，尤其是处理字体文件的部分。 可能的原因之一是Webpack没有正确配置来处理字体文件。通常，在Vue CLI创建的项目中，Webpack已经配置好了各种加载器，但有时候可能需要手动调整，特别是当添加自定义字体时。比如，用户可能使用了像.eot这样的旧版字体格式，而默认的配置可能没有包含这些类型的文件处理。 接下来，检查file-loader或url-loader是否被正确配置。在Webpack中，这些加载器负责处理静态资源，包括字体文件。如果字体文件的扩展名（如.eot、.ttf、.woff、.woff2）没有被正确匹配到这些加载器，就会导致模块未找到的错误。需要确保在Webpack配置的module.rules中有针对字体文件的规则，比如： { test: /\.(eot|ttf|woff|woff2)$/, use: [{ loader: 'file-loader', options: { name: 'fonts/[name].[hash:8].[ext]' } }] } 另外，检查CSS或Sass/Scss中的字体引用路径是否正确。有时候路径问题会导致Webpack找不到模块。如果字体文件存放在src/assets/fonts目录下，那么在CSS中使用相对路径时可能需要调整，比如使用~@/assets/fonts/iconfont.eot这样的路径，其中@代表src目录的别名。 还有可能的是vue-loader或css-loader的版本问题。如果用户升级了相关依赖，可能存在配置不兼容的情况。需要确认css-loader和vue-loader的版本是否兼容当前的Webpack版本，必要时查看官方文档或更新日志进行调整。 另外，可能需要检查字体文件是否实际存在于项目中指定的路径，以及文件名称是否正确。文件缺失或拼写错误也是常见的问题。 还有，如果用户使用了第三方库或图标库（如iconfont），可能需要确认是否需要额外的配置步骤，比如在main.js中引入CSS文件，或者是否正确打包了字体资源。 最后，可能需要运行npm run serve或重新编译项目，确保所有配置更改生效。如果问题依旧，查看终端报错信息的具体路径，确认Webpack尝试加载的路径是否与项目中的实际路径一致，从而进一步调整配置或文件位置。</think>在Vue项目中解决字体文件加载错误需要调整Webpack配置，以下是逐步解决方案： 1. **配置Webpack字体处理规则** 在`vue.config.js`中添加字体文件处理规则： ```javascript module.exports = { chainWebpack: config => { config.module .rule('fonts') .test(/\.(eot|ttf|woff|woff2)$/) .use('file-loader') .loader('file-loader') .options({ name: 'fonts/[name].[hash:8].[ext]' }); } } ``` 这将处理`.eot`等字体文件，并输出到`dist/fonts`目录[^1]。 2. **正确引用字体路径** 在CSS文件中使用`~@`路径别名： ```css @font-face { font-family: 'Iconfont'; src: url('~@/assets/fonts/iconfont.eot'); /* 假设字体存放在src/assets/fonts */ src: url('~@/assets/fonts/iconfont.eot?#iefix') format('embedded-opentype'), url('~@/assets/fonts/iconfont.woff2') format('woff2'); } ``` 3. **验证依赖版本** 确保安装兼容版本： ```bash npm install css-loader@^5.0.0 vue-loader@^15.9.0 file-loader@^6.2.0 --save-dev ``` 4. **检查文件结构** 确认字体文件实际存在于： ``` src/ assets/ fonts/ iconfont.eot iconfont.woff ... ``` 5. **处理Sass/Scss文件** 如果使用预处理器，需在样式文件顶部添加： ```scss $eot-font: '~@/assets/fonts/iconfont.eot'; ``` **常见错误解决方案：** - 报错`Module not found: Can't resolve './iconfont.eot'`：检查路径中的`~@`前缀和实际文件位置 - 报错`Invalid font format`：确认`format()`声明与实际字体类型匹配 - 报错`404 (Not Found)`：检查Webpack输出目录是否包含字体文件
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值