vue-cli 搭建项目打包后element-ui图标异常问题

最新推荐文章于 2023-11-02 10:36:34 发布
最新推荐文章于 2023-11-02 10:36:34 发布
阅读量1.2k 收藏 1
点赞数 1
分类专栏： web前端 Vue 项目小记 文章标签： vue-cli element-ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014395524/article/details/103204065
版权
web前端 同时被 3 个专栏收录
74 篇文章 1 订阅
订阅专栏
项目小记
20 篇文章 0 订阅
订阅专栏
Vue
16 篇文章 0 订阅
订阅专栏

利用 vue-cli 构建的项目，打包后放到服务器，测试发现，图标显示异常。打开控制台有如下报错：

这是因为vue项目打包后样式目录结构变为static/css 导致找不到对应的文件。

解决办法：

在 build/utils.js 文件如下位置添加一行代码：publicPath: '../../'

 

何必诗债换酒钱
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
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
electron-vue + vue-cli + element-ui 实时热更新版v12.0.4框架.rar
05-06
electron-vue + vue-cli + element-ui 实时热更新版，electronv12.0.4框架，打包好的框架，拿来即用，实时热更新，提高开发3倍效率
我为面试所准备的100道面试题以及答案，不看要遭老罪喽
最新发布
QQdd_的博客
11-02 1141
大家好，环境只是一个因素，它确实会影响大家找工作或者跳槽涨薪，但是影响不多，最重要的一个因素在于自己是否已经做好了准备。我呢为大家准备了百道面试题，为大家保驾护航，后续也会持续更新吧，毕竟还有新技术的出现。
使用element-ui项目打包后icon图标不显示
赵思远的博客
02-23 2632
在使用vue-cli搭建项目的时候，用了element-ui组件库的图标的，使用npm run build打包项目放到服务的时候，图标显示是框； 需要修改两个配置： 1.首先在config文件夹下的index.js中的build 下的 assetsPublicPath，记得加. 2.build文件夹下的utils.js文件中加一行 npm run build 重新打个包就好了！ ...
2021web前端面试题总结，每天熟悉看两道，重在积累...持续更新中........
wanghe1111_的博客
09-28 1万+
2022前端面试题整理：文章目录Http、HTML、浏览器相关1. 说一下http和https2. tcp三次握手，一句话概括3. TCP和UDP的区别4. WebSocket的实现和应用5.HTTP请求的方式，HEAD方式6.web quality(无障碍)7. 几个很实用的BOM属性对象方法8.说一下HTML5 drag api9.说一下http2.010. 补充400和401、403状态码11. fetch发送2次请求的原因
vue-element项目打包后偶尔出现icon乱码，Using / for division is deprecated and will be removed in Dart Sass 2.0.0
ZMJ_QQ的博客
09-05 1841
vue-element项目打包后上线偶尔出现icon图标乱码，DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.报错
vue项目打包发布后线上出现icon乱码
juvenile_Li的博客
10-12 1656
打包发布到线上，页面偶发性出现图标乱码问题，再次刷新页面后，又可正常显示
vue项目使用webpack打包后,图片不显示
weixin_45032622的博客
11-01 5571
vue项目打包后放到服务器上,配置好后,发现页面可以正常访问,访问后端接口也没有问题,但是网页登录界面的背景图片显示不出来.查看控制台也没有报错。错误原因是Webpack打包之后，在webpack.base.conf.js中会有图片大小限制配置{.*)?$/,}我们这里将limit注掉之后，重新打包，图片便可以显示。
Vue 上传到服务器后，build打包之后Element UI图标不显示问题（404错误）
总结前端开发中遇到的问题，分享前端知识
09-11 2394
报错显示： 问题原因： （1）查看/build/webpack.base.conf.js文件可以发现，woff或ttf这些字体会经由url-loader处理后在static/fonts目录下生成相应的文件。 （2）也就是说实际应该通过/static/fonts/**路径来获取字体图标，而实际却是请求/static/css/static/fonts/**，自然报404错误。 解决方式： （1）打开build/utils.js文件，在如下位置添加pu...
vue2.0基于vue-cli+element-ui制作树形treeTable
10-17
主要介绍了vue2.0基于vue-cli+element-ui制作树形treeTable，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue-cli3.0+element-ui上传组件el-upload的使用
10-17
主要介绍了vue-cli3.0+element-ui上传组件el-upload的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
使用vue-cli导入Element UI组件的方法
11-30
首先第一步,现在命令行中...以上所述是小编给大家介绍的使用vue-cli导入Element UI组件的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！
基于vue-cli 的 Element UI 的后台系统模板
02-21
基于vue-cli 的 Element UI 的后台系统模板
Vue 中 this.$router 与 this.$route 的区别 以及 push() 方法
热门推荐
VirgoYellow 的专栏
03-05 9万+
官房文档里是这样说明的： 通过注入路由器，我们可以在任何组件内通过this.$router访问路由器，也可以通过this.$route访问当前路由 可以理解为： this.$router 相当于一个全局的路由器对象，包含了很多属性和对象（比如 history 对象），任何页面都可以调用其 push(), replace(), go() 等方法。 this.$route 表示当前路由...
关系代数运算之连接运算
VirgoYellow 的专栏
04-20 3万+
原文转自https://blog.csdn.net/f_kld/article/details/77168351 1.关于连接的理解：连接也称为θ连接，关系R与关系S的连接运算是从两个关系的笛卡尔积中选取属性间满足一定条件的元组形成一个新的连接。这个条件为θ(比较运算符，如>、<、=)。 2.自然连接：是一种特殊的等值连接，比较两个关系中分量相同的属性组，并且在结果中把重复的属性...
JS 比较两个字符串的相似度
VirgoYellow 的专栏
09-05 8744
function similar(s, t, f) { if (!s || !t) { return 0 } var l = s.length > t.length ? s.length : t.length var n = s.length var m = t.length var d = [] f = f || 3...
谷歌浏览器被hao123劫持
VirgoYellow 的专栏
07-15 8127
谷歌浏览器被hao123劫持了。。。简直了。。。无力吐槽。。。 兜兜转转试了几种方法（因为实在不想改chrome.exe的名字，各种方法均以失败告终。。），最终不得不向现实低头，修改chrome.exe的名字： 现在的做法： 1、卸载重装 chrome 2、删除桌面的 Google Chrome.exe 快捷方式 2、修改安装目录下的 chrome.exe 名称，改成“谷歌浏览器.exe...
js 跳出 forEach 循环
VirgoYellow 的专栏
01-26 7672
使用 forEach 的时候，是不能通过 return 来跳出循环的（只可以终止 return 语句后面代码的执行，并不会终止整个循环），比如下面的例子???? var list = [ {id: 'id_1', name: 'name_1', price: 1}, {id: 'id_2', name: 'name_2', price: 2}, {id: 'id_3', name: 'name_3', price: 3}, {id: 'id_4', name: 'name_4
electron-vue + vue-cli + element-ui 实时热更新版
08-09
Vue-cli是Vue.js官方提供的脚手架工具，可以帮助开发者快速搭建Vue.js项目。它提供了一些基础模板，可以选择使用不同的配置模板来创建项目，并且集成了一些常用的开发工具和构建工具，使得开发者可以更方便地进行...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值