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

  • 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;
   }
   ```
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值