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;
   }
   ```

你可能感兴趣的:(nginx,vue)