vue.js打包后elementui图标样式丢失问题解决方案

npm run dev的时候elementui的图标能够看见，但是将项目打包后扔到tomcat里面跟后端服务一起部署的时候，图标丢失，打开浏览器控制台，发现报404错误。可以看到找elementui的图标的样式的时候是到http://localhost:8080/static/css/static/fonts/element-icons.535877f.woff这个路径下找字体图标文件，可以...

hxq133233

4532人浏览 · 2020-04-21 11:20:55

hxq133233 · 2020-04-21 11:20:55 发布

npm run dev的时候elementui的图标能够看见，但是将项目打包后扔到tomcat里面跟后端服务一起部署的时候，图标丢失，打开浏览器控制台，发现报404错误。可以看到找elementui的图标的样式的时候是到

http://localhost:8080/static/css/static/fonts/element-icons.535877f.woff 这个路径下找字体图标文件，可以发现多了个static/css

而fonts文件夹是跟css文件夹平行的，应该找http://localhost:8080/static/fonts/element-icons.535877f.woff 这个路径才能找到。排查思路是看前端打包配置里面搜索fonts文件夹的配置。最后在webpack.base.conf.js里面找到配置如下

解决方案是更改打包路径，更改后的配置如下

最终解决

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^