vue-cli 打包后element图标异常不显示问题

最新推荐文章于 2024-09-06 14:57:08 发布

原创最新推荐文章于 2024-09-06 14:57:08 发布 · 2.2k 阅读

文章标签：

#javascript #html5 #vue.js #html

前端踩坑专栏合集同时被 2 个专栏收录

28 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

Vue2快速入门和进阶实战精讲

11 篇文章

订阅专栏

在Vue项目中使用Element UI时，打包后发现图标无法正常显示，控制台报找不到element-icons资源的错误。解决方法是在build/utils.js中添加publicPath: '../..'，调整资源路径，重新打包后，图标显示恢复正常。

vue打包后如下element图标不显示
在这里插入图片描述
控制台报错

显示没有找到element-icons资源
解决办法：
在build文件下的utils.js文件中添加这一句publicPath:‘…/…/’
找到我如下代码中去添加


    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {

了解本专栏

订阅专栏解锁全文

超级会员免费看

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

嚣张农民

关注关注

14
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

订阅专栏

关于vue-cli脚手架打包后获取本地大图片或大文件报404的解决办法

junjie_jh的博客

04-14

670

最近帮公司同事看一个比较棘手的问题，查了好久终于找到了解决方案，记录下来方便以后碰到这个问题的小伙伴参考。是这样的，这个项目用vue-cli脚手架构建的项目，使用了 element-ui 中的字体图标，打包之后出现element-icons.ttf报404的错误。查看网上的解决办法都是在webpack中配置，但是该项目没有配置专门的wabpack，只有一个 vue.config.js文件，查...

Element UI 部署到服务器，图标不显示问题

weixin_48474646的博客

11-29

3219

vue项目引用Element UI组件后，本地运行时，图标是正常显示的，但是打包部署后，图标不显示。

1 条评论您还未登录，请先登录后发表或查看评论

element-ui本地运行图标正常显示，但打包部署后部分图标不显示问题解决

HelloKittyFC的博客

08-13

1748

element-ui打包部署后部分图标不显示

详解Vue+elementUI build打包部署后字体图标丢失问题

10-15

主要介绍了详解Vue+elementUI build打包部署后字体图标丢失问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

Vue 打包到生产环境部署后图标不见了

时光有伱，记忆成花~

07-17

1851

Vue 打包到生产环境部署后图标不见了

vue打包后字体图标丢失、部分静态资源404问题

weixin_55629817的博客

03-17

1283

打包后字体图标丢失、静态资源404

精选资源

解决Vue打包后访问图片/图标不显示的问题

01-19

大家可否遇到过 npm run build 打包后，项目在线上运行时，资源文件 (图片、图标)不显示的问题，接下来，我给大家分享一下我的解决方案~ 1.检查打包后dist中的css文件打开此文件后你会头晕，因为都是打包压缩过...

精选资源

考试类精品--基于vue-element-admin 框架的考试后台管理体统.zip

02-06

开发者可能利用了Vue CLI工具快速搭建项目，并利用Webpack进行打包构建。此外，可能还涉及到数据库操作（如MySQL、MongoDB等）和权限管理，以及对用户输入的验证和错误处理。总之，这个项目是一个完整的、功能丰富...

Element-ui项目打包后icon图标/登录背景图不显示

xiaohuichonga的博客

03-22

679

登录背景图,页面element-ui字体图标不显示问题

element-ui打包之后图标不显示，woff、ttf加载404

最新发布

Your_Boy_Tt的博客

09-06

2704

昨天在 vue 项目中编写 element-ui 的树形结构的表格，发现项目中无法生效，定位问题之后发现项目使用的 element-ui 的版本是 2.4.11。这个 BASE_URL 是样式渲染的根目录，通过拼接可以看出来，BASE_URL = ‘/static’，也就是说，在渲染样式的时候，定位到 /static 目录下。有知道的请评论区告诉我）。而在 element-ui-2.15.14 版本下，系统还会加载 font 目录下的两个文件，由于我所在项目配置问题，所以扫描的路径是基于当前路径。

vue项目打包后，在浏览器上的标题没有图标了？打包之后丢失ico图标丢失

qq_45067263的博客

07-02

4706

项目场景： vue项目打包后，在浏览器上的标题那里不显示图标，本地显示图标正常：打包之后查看：图标丢失，不显示原因分析：解决方案：原因可能有很多种，一条一条筛： 1.打包后图片有没有在文件夹内 2.然后图片路径要对 3.看看打包之后的文件路径对不对 4.图标可能有延迟需要等一会儿多刷一会儿也许就有了下面看解决方法找到问题所在：先打包测试，然后看打包完之后的文件里面能不能找到ico这个图标，没有的话那就说明路径配置错误那就查看路径配置：看自己的配置文件webpack.prod.

vue 打包部署子目录后 elementUI icon 图标不显示

kurcp的博客

08-23

1690

vue 打包部署子目录后 elementUI icon 图标不显示

Electron 打包配置，element-ui图标不显示

qq_40986353的博客

05-04

1320

图标不显示，查看打包之后elementui的路径，有可能是是这里配置的时候地址写错，导致引用出错。

使用element-ui项目打包后icon图标不显示

赵思远的博客

02-23

3109

在使用vue-cli搭建项目的时候，用了element-ui组件库的图标的，使用npm run build打包项目放到服务的时候，图标显示是框；需要修改两个配置： 1.首先在config文件夹下的index.js中的build 下的 assetsPublicPath，记得加. 2.build文件夹下的utils.js文件中加一行 npm run build 重新打个包就好了！ ...

Element-ui项目打包后icon图标不显示——踩坑记录

code_carrierV1的博客

08-31

3979

升级elementUI后发布图标不显示踩坑

解决vue2项目打包后element图标失效的问题

mango339的博客

01-16

1067

今天打包vue2项目时，打包完成之后发现element图标失效，网上找的方法修改 build/utils.js 发现并不适配自己的项目；2.找到test: /\.(woff2?publicPath: '../../' // 新增内容。1.找到项目中build文件夹中的webpack.base.conf.js文件。这种打包问题比项目中遇到的一般问题更难排查解决，记录一下~

使用elementui打包后icon图标不显示问题

BiangBaing的博客

08-17

3605

最近发现当 Vue.js 项目中使用 element-ui 图标时，如果使用 npm run dev 方式启动，图标是显示正常的。查看 /build/webpack.base.conf.js 文件可以发现，woff 或 ttf 这些字体会经由 url-loader 处理后在 static/fonts 目录下生成相应的文件。也就是说实际应该通过 /static/fonts/ 路径来获取字体图标，而实际却是请求 /static/css/static/fonts/，自然报 404 错误。...

解决Vue部署到生产环境后Element UI图标不显示问题

南吕政的博客

09-07

1805

最近发现当 Vue.js 项目中使用 element-ui 图标时，如果使用 npm run dev 方式启动，图标是显示正常的。查看 /build/webpack.base.conf.js 文件可以发现，woff 或 ttf 这些字体会经由 url-loader 处理后在 static/fonts 目录下生成相应的文件。也就是说实际应该通过 /static/fonts/** 路径来获取字体图标，而实际却是请求 /static/css/static/fonts/**，自然报 404 错误。

[已解决]electron-builder vue 打包后iconfont/element-ui字体图标不显示问题

weixin_44934844的博客

09-21

1852

原因明确，但是本人着实不懂打包的地址配置，截止编写此文，element-ui的字体图标没有得到解决，以至于下拉框等图标还是不显示。在项目的main.js引入的import 'element-ui/lib/theme-chalk/index.css’就不需要了；通过多方查找资料最后又回到了Vue CLI，解决的核心在于此文档URL 转换规则，根据文档我的理解是因为打包，element-ui的样式没有当做静态资源引用。上述的步骤，在 iconfont.cn官网的文档->symbol 引用有详细描述。