vue-cli+iview 打包后iview自带的字体图标找不到

最新推荐文章于 2021-02-22 15:02:43 发布
最新推荐文章于 2021-02-22 15:02:43 发布
阅读量716 收藏 1
点赞数 1
CC 4.0 BY-SA版权
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_20753229/article/details/87801878
本文介绍了一种解决使用Vue官方脚手架结合iview框架时，构建后服务器上iview字体图标无法显示的问题。通过调整build/utils.js中ExtractTextPlugin插件的options配置，添加publicPath参数，成功解决了图标显示问题。

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

使用vue的官方脚手架+iview
npm run build之后到服务器，iview中自带的字体图标显示不出来

解决办法：
更改 build/utils.js 文件中 ExtractTextPlugin 插件的options 配置：
添加 publicPath: ‘…/…/’, 完美解决问题
在这里插入图片描述

vue-cli+iview项目打包上线之后图标不显示问题及解决方法
12-13
做vue项目使用的iviewUI库，打包上线之后发现icon都不显示，然后做了很多尝试，更改打包路径等，都没有太好的效果，最后还是在网上找到了方法： 1. 方法一： 在build/utils.js下面找到这段代码，将其中publicPath改成…/…/，保存并重新打包。注意：这个路径不是绝对的，根绝自己的目录结构来写 // Extract CSS when that option is specified // (which is the case during production build) if (options.extract) { return ExtractTextP
vue使用elementUI打包后字体图标丢失问题
Jester的博客
10-10 2103
vue+elementUI构建的项目，打包后发现弹窗信息的图标丢失了，控制台显示找不到字体文件 解决方法： 打包配置文件build目录下webpack.base.conf.js文件添加（vue-cli构建项目会有的） utils.js文件添加 publicPath:'../../' 重新打包结果： ...
Vue+ElementUi项目部署服务器字体图标丢失问题
路克森的博客
10-21 3272
博主个人主页 解决办法 脚手架build文件夹 util 文件 内 找到这个代码块 加上 publicPath 重新build 部署 即可
iview打包icon不显示
iorn_mangg的博客
07-18 545
vue 的build文件下的webpack.prod.conf.js中 将extract:true 改为false
vue-cli+iview打包后iview自带的字体图标找不到的解决办法
冰雪为融的博客
12-04 3950
使用iview做项目的时候，打包上传到服务器后，iview中自带的字体图标显示不出来，百度了很多方法，下面的方法可靠哦 更改 build/utils.js 文件中 ExtractTextPlugin 插件的options 配置： 添加 publicPath: '../../', 完美解决问题 if (options.extract) { return ExtractTextPlugin...
vue2.0(vue-cli+vue-router+vue-resource+iView)项目.zip
最新发布
12-02
基础医学一个 Vue.js 项目项目说明本项目为图书管理系统前台，采用vue.js,vue-resource,vue-router,iView2.0UI框架,vue-quill-editor等技术实现前台页面，后台采用springboot+mybatis等技术实现数据持久化以及api...
vue.js iview打包上线后字体图标不显示解决办法
11-21
在vue+cli项目中使用iview组件及icon图标，打包后icon不显示,解决办法： 1.在build文件夹下找到utils.js文件，把publicPath改为 ../../ if (options.extract) { return ExtractTextPlugin.extract({ publicPath:...
iview在vue-cli3如何按需加载的方法
01-19
iview在官方文档上，对于使用脚手架vue-cli3的项目的使用只有一句话：“我们为最新的 Vue CLI 3 提供了相应的 iView 插件，如果你正在用 Vue CLI 3，可以直接在插件中搜索 iview，安装插件来使用。” 老实说，第一次...
vue-cli+iview打包后iview自带的字体图标找不到,浏览器报错的404
chelflan's blog
01-02 1144
1.dev模式的时候正常 build后页面打开，图标显示小方块。bug如下: 3.解决方法: 更改 build/utils.js 文件中 ExtractTextPlugin 插件的options 配置： 添加 publicPath: ‘…/…/’（PS:注红箭头处的逗号） 4.拓展 具体实现原理，请看webpack原理：https://www.webpackjs.com/ ...
vue iView 打包后 字体图标不显示
weixin_30698297的博客
07-16 708
问题描述：　 　　　　今天webpack打包后发现iView 字体图标不显示 　　　　 解决方案： 　　　　build/webpack.prod.conf.js 这个文件里面 　　　　 module: { rules: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, ...
iview打包到生产环境部署后图标不见了解决方案
Cool的博客
04-19 1037
➢ 现象:图标不见了 本地环境没有问题,打包部署到服务器上图标就不见了 在控制台提示error找不到字体的资源路径 ➢ 解决方案 这个问题可能是vue-cli脚手架配置问题 在build/webpack.prod.conf.js中 module: { rules: utils.styleLoaders({ sourceMap: config.build.p...
解决iview菜单使用iconfont图标无法显示的问题
热门推荐
lvdou1120101985的博客
09-28 2万+
写在前面： 首先，我出现问题的场景是使用在导航菜单上，即 Menu Item； 其次，我是使用json文件递归生成的菜单列表，在meta属性中设置的icon；   今天在使用iconfont的图标作为菜单的图标时发现总是显示成方框框 使用方法和设置Button的图标是一样的，检查了好久也没有发现问题，百思不得其解…… 使用F12检查元素，发现原来框架是在样式前面加上了 iv...
iview 打包Icon不显示问题修复
尼伯特的博客
01-03 4500
iview 打包不显示问题修复 最近使用iviewUI框架开发应用，打包完成之后访问，发现所有的icon都报错不显示， 最终通过修改webpack配置文件修复，修改如下： 找到 build 目录下 webpack.prod.conf.js 文件， rules: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, ...
iview中icon不能显示的问题
qq_39865491的博客
10-26 2万+
当代码中引入自定义的icon时,iview中原来的icon就不能显示出来了 这是因为引入了自定义的icon,使得icon的格式发生了变化 在iview的icon前面加上ivu-icon-,完美解决 ...
Vue+Iview打包后字体图标丢失问题
pan_xi_yi的博客
08-23 690
使用Vue+Iview搭建项目npmrunbuild打包后字体图标丢失，找不到图标的路径。 解决： 在build/utils.js文件中 增加 publicPath: '../../' 解决图标问题 // Extract CSS when that option is specified // (which is the case during production...
vue+iView 引入iconfont
lvdou1120101985的博客
09-28 8567
iView本身的图标不是很多，所以在选择图标的时候翻出了收藏了好久的iconfont~ iconfont是阿里出品的开源图标库，有非常多的图标，兼具美观和全面，非常适合找图标~ 网址：iconfont官网 一、引入单色图标 1. 新建项目    2. 选择喜欢的图标加入购物车，将鼠标放在喜欢的图标上面就会显示菜单。 3. 将购物车的图标加入项目； 点击右上角的“购物车”按钮弹出...
iview Table列表中增加字体图标
达拉崩巴斑得贝迪卜多比鲁翁_
02-22 486
iview Table列表中增加字体图标 一： { 'title': this.$t('设备别名'), 'key': 'actStatus', render: (h, params) => { return h('div', [ h('Icon', { props: { type: 'ios-create-outline'
vue打包后，样式、字体资源引用错误
yxyy3511的博客
05-15 913
在build文件夹中的utils.js加入代码publicPath:'../../'或'/',如下： return ExtractTextPlugin.extract({ use: loaders, publicPath:'../../', fallback: 'vue-style-loader', }) ...
基于Vue-CLI的iview文档工程实现及API同步说明
- **技术栈**：iview-doc.zip 中的 iview 表明项目使用了iview这一UI组件库，iview是基于Vue.js的一个高质量的UI组件库。 - **文件格式**：.zip为压缩文件格式，用于将多个文件打包压缩成一个文件，便于传输和备份。...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值