Element-ui结合VUE 打包后 Icon 图标消失问题的解决

最新推荐文章于 2026-06-22 10:15:09 发布

原创最新推荐文章于 2026-06-22 10:15:09 发布 · 1.8k 阅读

本内容遵循CC 4.0 BY-SA版权协议

在Vue项目中使用Element-ui时遇到一个问题，即Icon图标在本地正常显示，但打包部署到服务器后消失。问题根源在于服务器部署配置。通过分析，发现是由于服务器未将.woff字体文件识别为静态资源。解决方案是在nginx配置中添加对.woff的支持，将其视为静态文件，从而确保图标正确加载。更新nginx.conf后，图标显示恢复正常。

Element-ui结合VUE 打包后 Icon 图标消失问题的解决

在使用Element-ui的Icon 图标功能时, 本地运行vue后能正常显示, 但是打包到服务器上就显示不出来, 从网上找了很多方法都没法解决, 突然想起是服务器部署的问题, 请听我娓娓道来.
系统情况: 前后分离
- 前端: Vue-cli 3.12.1, Element-ui 2.15.1
- 后端: java
- 服务器: tomcat nginx
使用nginx做动静分离, java项目部署在tomcat里, 静态文件比如页面, js文件, 图片等通过vue-cli打包后部署在nginx的html目录下.
部署后其他均正常, 只是Icon 图标显示错误, 后来通过浏览器开发者工具看到Icon 图标其实是.woff文件,保存在font目录下. 突然想起来, 应该让系统把woff文件识别成静态文件, 否则就会去tomcat里找, 肯定找不到呀. 于是在nginx的设置里, 加上woff, 重启nginx, 搞定.
附上nginx.conf有关静态文件的设置内容,里边的woff是我后添加的:

```
	#拦截静态资源
location ~ .*\.(html|htm|gif|jpg|jpeg|bmp|png|ico|js|css|woff)$ {
	# 存放静态资源的路径, 这里是docker中的路径
    root /usr/share/nginx/html/;
	#index  index.html index.htm;
	charset utf-8;
   }
   ```

标签

#nginx #vue