vue-cli+iview打包后iview自带的字体图标找不到,浏览器报错的404

最新推荐文章于 2023-11-17 10:27:50 发布
最新推荐文章于 2023-11-17 10:27:50 发布
阅读量183 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38911839/article/details/103321364
版权

找到build/webpack.base.config.js
修改publicPath即可
在这里插入图片描述

极品老大
关注
vue.js iview打包上线后字体图标不显示解决办法
11-21
在vue+cli项目中使用iview组件及icon图标，打包后icon不显示,解决办法： 1.在build文件夹下找到utils.js文件，把publicPath改为 ../../ if (options.extract) { return ExtractTextPlugin.extract({ publicPath:'../../', use: loaders, fallback: 'vue-style-loader' }) } else { return ['vue-style-loader'].concat(loaders) } 2.在build文件夹下找到web
解决webpack+Vue引入iView找不到字体文件的问题
12-09
原因： css-loader后面带了参数modules(打包报错) url-loader后面带了参数name(引入报错) { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader?modules!postcss-loader" }) }, { test: /\.(svg|ttf|eot|woff)\??.*$/, loader: "url-loader?limit=10000&name=fonts/[name].[ext]" } 解决方案：去掉参数
vue-cli+iview打包后iview自带的字体图标找不到的解决办法
冰雪为融的博客
12-04 3918
使用iview做项目的时候，打包上传到服务器后，iview中自带的字体图标显示不出来，百度了很多方法，下面的方法可靠哦 更改 build/utils.js 文件中 ExtractTextPlugin 插件的options 配置： 添加 publicPath: '../../', 完美解决问题 if (options.extract) { return ExtractTextPlugin...
iview打包icon不显示
iorn_mangg的博客
07-18 514
vue 的build文件下的webpack.prod.conf.js中 将extract:true 改为false
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
12-13
做vue项目使用的iviewUI库，打包上线之后发现icon都不显示，然后做了很多尝试，更改打包路径等，都没有太好的效果，最后还是在网上找到了方法： 1. 方法一： 在build/utils.js下面找到这段代码，将其中publicPath...
iview在vue-cli3如何按需加载的方法
01-19
iview在官方文档上，对于使用脚手架vue-cli3的项目的使用只有一句话：“我们为最新的 Vue CLI 3 提供了相应的 iView 插件，如果你正在用 Vue CLI 3，可以直接在插件中搜索 iview，安装插件来使用。” 老实说，第一次...
iview：基于Vue CLI 3和iView的管理模板。基于Vue CLI 3 + iView的Vue.js后台管理系统
02-06
基于Vue CLI 3 + iView的后台管理系统，支持：开发调试，构建，代码规范校正等。 技术栈 Vue，Webpack，ES6，Vue路由器，Vuex，Sass，PostCSS等。 例子 线上的例子 用户：admin 密码：123456 服务端框架 命令 # 下载...
vue项目本地开发完成后部署到服务器后报404
最新发布
weixin_50367873的博客
11-17 3282
前后端分离开发模式下，前后端是独立布署的，前端只需要将最后的构建物上传至目标服务器的web容器指定的静态目录下即可我们知道vue项目在构建后，是生成一系列的静态文件常规布署我们只需要将这个目录上传至目标服务器即可让web容器跑起来，以nginx为例配置完成记得重启操作完后就可以在浏览器输入域名进行访问了当然上面只是提到最简单也是最直接的一种布署方式什么自动化，镜像，容器，流水线布署，本质也是将这套逻辑抽象，隔离，用程序来代替重复性的劳动，本文不展开。
解决iview菜单使用iconfont图标无法显示的问题
热门推荐
lvdou1120101985的博客
09-28 1万+
写在前面： 首先，我出现问题的场景是使用在导航菜单上，即 Menu Item； 其次，我是使用json文件递归生成的菜单列表，在meta属性中设置的icon；   今天在使用iconfont的图标作为菜单的图标时发现总是显示成方框框 使用方法和设置Button的图标是一样的，检查了好久也没有发现问题，百思不得其解…… 使用F12检查元素，发现原来框架是在样式前面加上了 iv...
iview中icon不能显示的问题
qq_39865491的博客
10-26 1万+
当代码中引入自定义的icon时,iview中原来的icon就不能显示出来了 这是因为引入了自定义的icon,使得icon的格式发生了变化 在iview的icon前面加上ivu-icon-,完美解决 ...
iview打包到生产环境部署后图标不见了解决方案
Cool的博客
04-19 1005
➢ 现象:图标不见了 本地环境没有问题,打包部署到服务器上图标就不见了 在控制台提示error找不到字体的资源路径 ➢ 解决方案 这个问题可能是vue-cli脚手架配置问题 在build/webpack.prod.conf.js中 module: { rules: utils.styleLoaders({ sourceMap: config.build.p...
【爬坑日记】iview 打包之后 找不到自带的icon图片
weixin_34409822的博客
06-29 649
使用iview在webpack打包后，无法识别出自带的icon 控制台报错 解决方法： 在 build/webpack.prod.conf.js 中修改 module: { rules: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: false }...
iview的icon组件怎么添加点击事件
aaa333qwe的博客
12-13 9399
原生事件要加修饰符。 这样写没反应？？？ 答案在上面。
vue-cli3.0+iview4.0打包后字体图标资源丢失问题
qq_37947438的博客
05-30 544
解决办法：在build→utils.js中ExtractTextPlugin.extract中配置publicPath: '../../' return ExtractTextPlugin.extract({ use: loaders, publicPath: '../../', fallback: 'vue-style-loa...
vue打包后图标字体请求路径404问题
qq_25245075的博客
07-09 1689
在build目录下的utils.js文件中修改publicPath:'../../'（如图所示）,重新打包就可解决
iview打包到生产环境图标不见了解决方案
大师兄
01-31 1690
原文地址:https://dsx2016.com/?p=267 ➢ 现象:图标不见了 本地环境没有问题,打包部署到服务器上图标就不见了 在控制台提示error找不到字体的资源路径 ➢ 解决方案 这个问题可能是vue-cli脚手架配置问题 在build / webpack.prod.conf.js中 module: {   rules: utils.styleLoad...
vue-cli+iview 打包后iview自带的字体图标找不到
Helen
02-20 680
使用vue的官方脚手架+iview npm run build之后到服务器，iview中自带的字体图标显示不出来 解决办法： 更改 build/utils.js 文件中 ExtractTextPlugin 插件的options 配置： 添加 publicPath: ‘…/…/’, 完美解决问题 ...
Vue网格化平台iview-admin-grid设计源码发布
资源摘要信息:"基于Vue的iview-admin-grid网格化平台设计源码" Vue.js是一种流行的JavaScript框架，用于构建用户界面和单页应用程序。Vue的核心库专注于视图层，但可以轻松集成与更复杂的库和现有项目。iview-admin...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值