1，问题描述
（1）element-ui 自带了一套常用的图标集合，使用起来十分方便。最近发现当 Vue.js 项目中使用 element-ui 图标时，如果使用 npm run dev 方式启动，图标是显示正常的：

（2）而一旦使用 npm run build 编译打包后发布到服务器上，会发现图片显示不出来（Chrome 浏览器下显示方块）。

（3）查看网络请求可以看到如下两个字体文件加载不到：

组件触发的时候才会加载这个字体
http://localhost:59090/static/css/static/fonts/element-icons.535877f.woff
http://localhost:59090/static/css/static/fonts/element-icons.732389d.ttf


2，问题原因
（1）查看 /build/webpack.base.conf.js 文件可以发现，woff 或 ttf 这些字体会经由 url-loader 处理后在 static/fonts 目录下生成相应的文件。

（2）也就是说实际应该通过 /static/fonts/** 路径来获取字体图标，而实际却是请求 /static/css/static/fonts/**，自然报 404 错误。

3，解决办法
（1）打开 build/utils.js 文件，在如下位置添加 publicPath: ‘…/…/’

build目录就是你自己项目的第一个目录或者靠前的目录吧


（2）修改完毕后重新 build 发布，可以发现图标已经可以正常显示了。

=================================================

												


											

Vue.js - 解决部署到服务器后Element UI图标不显示问题（404错误）相关推荐
	

    
								
  1. Vue - 解决部署到服务器后Element UI图标不显示问题（50错误）
		
    原因: 最后找到是 nginx.conf  文件配置有问题 一开始:没有加 woff.ttf location ~ .*\.(gif|png|jpg|ico|js|css|html)$ { root  ...
    
		
    2. 
						
  2. 本地使用element ui 图标不显示或显示错乱的问题
		
    本地使用element ui 图标不显示或显示错乱的问题 官方使用方式 <!-- 引入样式 --> <link rel="stylesheet" href=&qu ...
    
		
    3. 
						
  3. 已解决：前、后端打包部署至服务器后，背景图片不显示并且一些图标都变成了方块
		
    将打包好的jar包部署至服务器后,输入项目网址后,发现背景图片没有显示出来并且一些图标变成了方块. 解决办法:在前端找到bulid文件目录下的utils.js文件,添加以下语句: publicPath ...
    
		
    4. 
						
  4. vue 打包html静态页面,Vue.js打包部署到服务器路径资源和页面404
		
    默认根目录路径 在我们开发完vue项目后进行代码执行npm run build命令后,默认index文件引用静态资源路径是在/static下的,如下图: 更改根目录路径 找到build/config/ ...
    
		
    5. 
						
  5. vue项目部署到服务器后浏览器标签上的小图标消失不见
		
    背景: 最近在开发项目过程中发现一个问题,项目部署到服务器后在浏览器打开,会发现浏览器标签上的小图标消失不见了.百度查找问题,网上给出了许多解决的方案,例如清除浏览器缓存.把图标的相对路径改成绝对路径 ...
    
		
    6. 
						
  6. vue上线后图片不显示_解决Vue打包后访问图片/图标不显示的问题
		
    大家可否遇到过 npm run build打包后,项目在线上运行时,资源文件 (图片.图标)不显示 的问题, 接下来,我给大家分享一下我的解决方案~ 1.检查打包后dist中的css文件 打开此文件后 ...
    
		
    7. 
						
  7. vue框架项目部署到服务器_在浏览器中在线尝试无服务器框架项目！
		
    vue框架项目部署到服务器 无服务器框架是无服务器工具的一致领导者. 但是,没有简单的方法可以在线试用无服务器框架项目. 您确实需要一个体面的开发人员设置,并且需要一些工作来设置sls , npm等. ...
    
		
    8. 
						
  8. #Tomcat# 本地正常但是部署到服务器后,mysql插入中文乱码问题解决！
		
    一百度,几乎都是大同小异的答案,全都是互相转载的文章.帮助很小 如果你遇到了**Tomcat本地正常!但是部署到服务器后,mysql插入中文乱码问题解决!**这样的问题. 常规的方式都无效,不妨试试下 ...
    
		
    9. 
						
  9. Tomcat本地正常！但是部署到服务器后,mysql插入中文乱码问题解决！
		
    一百度,几乎都是大同小异的答案,全都是互相转载的文章.帮助很小 如果你遇到了**Tomcat本地正常!但是部署到服务器后,mysql插入中文乱码问题解决!**这样的问题. 常规的方式都无效,不妨试试下 ...
    
		
    10. 
		


					

最新文章
	

    
						
  1. 三个事件同步实现双相机同步WaitForMultipleObjects
		
    2. 
						
  2. Docker容器管理总结
		
    3. 
						
  3. 大数据学习笔记：创建与配置虚拟机[Ubuntu + CentOS]
		
    4. 
						
  4. 【英语学习】【WOTD】billion 释义/词源/示例
		
    5. 
						
  5. ajax返回list前台遍历_微信返回列表页回到原浏览位置问题记录
		
    6. 
						
  6. 在Angularjs中使用directive自定义指令实现attribute的继承
		
    7. 
						
  7. JAXB XML和Bean互相转换
		
    8. 
						
  8. 晕晕沉沉的一天，ISAPI_Rewrite 2.9破解版竟然是假的
		
    9. 
						
  9. vue3 + uni-app 封装音乐播放插件
		
    10. 
						
  10. 百度网盘如何免费上传大于4GB的文件（制作BT文件）
		
    11. 
						
  11. Ubuntu16.04 anaconda 上安装 opencv
		
    12. 
						
  12. selected 操作
		
    13. 
						
  13. 如何实时抓取动态网页数据？
		
    14. 
						
  14. Java面试题之ServletJSP篇
		
    15. 
						
  15. html的多选题,试题（多选题）.html
		
    16. 
						
  16. [Windows] Flash.Player｜AX｜PP｜32.0.0.142 去广告 不跳更新版
		
    17. 
						
  17. python话费充值_Python 登录移动查询话费
		
    18. 
						
  18. PIN, PIN2, PUK, PUK2
		
    19. 
						
  19. 包子笔记 - 借贷投资就相当于赌博
		
    20. 
						
  20. 编程输出1000以内所有的完数，并输出其所有因子。所谓完数，即一个数的所有因子（除其自身）之和恰好等于其自身。如6就是一个完数，6=1+2+3。**输出格式要求：“\n%5d\n“, “%5d“
		
    21. 
		

	


热门文章
	

    
									
  1. 用Shell编程写一个能实现自动安装目录和运行游戏的脚本
			
    2. 
						
  2. 【腾讯TMQ】众测实战经验小结
			
    3. 
						
  3. 下楼成功率100%！这个“盲人”机器人无需传感器，全凭“感觉”，也能上下楼梯自如...
			
    4. 
						
  4. php 富文本编辑器  UEditor 的使用，参数配置（保存图片路径）
			
    5. 
						
  5. 计算机提示msvcp110.dll文件丢失下载安装修复教程
			
    6. 
						
  6. python办公自动化价值是什么意思_最全总结 | 聊聊 Python 办公自动化之 Word（中）...
			
    7. 
						
  7. 五、Oracle19c下载、安装和验证（适用于Windows系统）
			
    8. 
						
  8. Word文档结构图的生成and结合文档结构图生成目录
			
    9. 
						
  9. 用户手册：接入设备之接入Hikvision摄像头
			
    10. 
						
  10. 【Arduino实验04 抢答器制作】
			
    11.