vue+elemenui项目打包部署服务器后图标显示方框

最新推荐文章于 2023-02-19 13:43:36 发布
最新推荐文章于 2023-02-19 13:43:36 发布
阅读量2.7k 收藏
点赞数 1
分类专栏： 前端 vue报错
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41796860/article/details/90064616
版权

vue+elementui项目之前打包后部署服务器，图标还是好好的，突然今天就不好使了，如下图
在这里插入图片描述
查阅各种资料，最后忘记是看了哪篇文章后，说是webpack打包配置有问题，具体改法是：在build文件夹下找到utils.js
在这里插入图片描述

找到如上图代码处，加入红色圈起来的部分，虽然我注释掉了，但是我的代码里之前没有这句
之所以注释掉了，是因为我加上这句话后打包部署到服务器后，发现真的好使了，图标可以正常显示了，后来我又注释掉试了试，重新打包部署服务器，发现图标依然好使，很奇怪的一个问题

假装的妆
关注
专栏目录
vue3 - vite项目打包部署服务器上线后图片不显示并且路径中存在undefined字眼，本地开发环境下正常显示图像没任何问题，但build编译打包后上传到线上服务器后再打开就不显示了，路径有问题
高级前端工程师
08-18 3937
vue3，vite，图片不显示，图像加载失败，打包后图片路径不对，前面多了一个undefined，本地没问题只要打包上线就报错，vue3 vite项目解决部署线上图片URL失效问题，使用本地图片打包后不显示，本地资源路径，本地图片图标，图标不显示，打包后图片失效的问题，访问图片/图标不显示的问题，vue3+vite打包后图片路径错误不显示，背景图打包之后访问路径错误问题的解决，打包部署到服务器上却显示路径undefined问题，图片url域名错误，导致无法显示，还是报错显示不了，如何解决，无效，还是不行，r
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
12-13
做vue项目使用的iviewUI库，打包上线之后发现icon都不显示，然后做了很多尝试，更改打包路径等，都没有太好的效果，最后还是在网上找到了方法： 1. 方法一： 在build/utils.js下面找到这段代码，将其中publicPath改成…/…/，保存并重新打包。注意：这个路径不是绝对的，根绝自己的目录结构来写 // Extract CSS when that option is specified // (which is the case during production build) if (options.extract) { return ExtractTextP
vue项目打包之后，element的图标显示小方框
张张张的博客
09-27 2836
这里这个limit 配置项会指定文件大小，小于limit的图片无法生成图片并以64格式引入，大于limit的图片将以url加载。
vue打包elementUI的时候，小图标变成小方框
青烟小生的博客
07-20 2162
在vue的build文件夹找到utils.js文件，然后在下面这个位置添加 publicPath: '../../' function generateLoaders (loader, loaderOptions) { const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader,px2remLoader] if (loader) { loaders.push({ lo
使用elementUI已经引用了最新css库，但是组件中小图标还是显示方框的解决办法
hmy123cq3的专栏
03-30 1985
1.最开始引用官网的css是正常显示的 官网css的url地址：<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> 2.从官网下载index.css放到本地后就显示方框了 <link href="../Css/index.css" rel="stylesheet" /> 3.最后得知，官网提供的url有个/fonts/element-icons.t.
基于饿了么组件--------项目部署后icon小图标显示成小方块 (比如导航栏箭头)
山海也有意难平
08-05 601
解决方法：修改项目中build/utils文件 if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', publicPath:'../../' }) } else { return ['vue-style-loader'].concat(loaders) } ..
vue2+vue-cli4+elementUI项目打包部署之后icon图标展示为方块,图片路径正确却不显示问题解决
qq_34458968的博客
09-23 2249
vue2+vue-cli4+elementUI项目打包部署之后icon图标展示为方块,图片路径正确却不显示问题解决
详解Vue+elementUI build打包部署后字体图标丢失问题
11-20
Vue+elementUI build打包部署后字体图标丢失，控制台显示文件element-icons.woff和element-icons.ttf文件404 错误展现： 控制台报错截图 dom渲染展示 解决方法： webpack module配置：(build目录下webpack.base...
vue+vite+宝塔 项目打包上线云服务器详细过程（含echarts数据请求跨域问题）
weixin_52084329的博客
11-26 1785
又是心情异常复杂的一篇文章，但是万事开头难，还是超级开心啊哈哈哈哈哈哈哈！这是自己写的一个小项目，基于vite创建，包含了echarts调用api请求数据，所以里面涉及到了跨域问题困扰了我很久！
ssm+vue+MySQL+tomcat前后端分离项目部署至腾讯云服务器
KK001_Han的博客
09-16 1697
第一次在Linux云服务器上部署前后端分离项目，查阅了许多网上的教程和文章，踩了许许多多的坑。最终成功在腾讯云的轻量应用服务器上部署了自己的前后端分离项目，记录一下前后端部署的过程，供学习的小伙伴参考。
vue项目element-ui组件打包后组件显示方框解决方式
rolinabc的博客
03-05 2513
在我们对vue项目进行打包的时候,会遇到一些组件问题,比如说分页组件的箭头,下拉框组件的箭头打包完成后会出现方框显示的问题.具体解决办法如下: 1.找到项目底下build/utils.js文件 2.添加 publicPath: '../../' 完成后再进行项目打包就可以了 ...
vue+element-ui运行后图标不显示（只显示成小方框的错误）
Andre_dong的博客
06-02 2176
看了一下网上大部分的做法，却没有一种能够解决我的问题 在苦苦钻研了几个小时后，问题终于解决了，解决方法如下： 在config文件里面的index.js文件当中，找到这个代码块，添加箭头所指的代码，注意加上那个小点。 问题解决 ...
解决elementU组件图标显示不全，都是方块的问题
baiye_nini的博客
02-03 2330
问题：将elementui的js和css下载到本地后，在html中引入 <link rel="stylesheet" href="css/index.css"> <!--elementui组件库--> <script src="/js/index.js" charset="utf-8"></script> 组件可以正常使用，但是组件图标都是方块 原因：只引入了css和js文件，但是css文件所需要的fonts文件没有在本地 解决方法： 1.
Vue 不加载字体包 导致elementUI的icon显示为正方形小框框问题解决
wuyxinu的博客
06-08 6087
在一次开发任务中遭遇的一个问题 正常使用 element-ui的icon时 却发现不知道为什么显示都为正方形小框框于是，我就将element-ui 版本由 2.12.0 提升为 2.15.2 但是无法解决这个问题 失败Vue.config.js 配置问题 也就是 webpack的配置问题 通过将vue-cli预设配置弹出的操作，我查看了一下 Vue-cli 预设Webpack配置，和我自己的webpack配置，没看出问题来。感觉一切正常...
vue 使用element-ui打包后所有icon不显示，或者显示方块
最新发布
lovewangyage的博客
02-19 1392
vue 使用element-ui打包后所有icon不显示，或者显示方块
记一次前端vue 部署到linux服务上标记变为方框
lazy_ting的博客
05-18 248
现象：windows开发，部署到linux服务器上，开发环境没有问题，部署到测试环境就出现这个问题了 原因：https://segmentfault.com/a/1190000019511585 解决：将config目录下，index.js文件中的module.exports里的build对象的assetsPublicPath的值改为 "/"(原始值为 "./") 然后 重新 npm run build ，再部署就行了 ...
element-ui 组件图标全变成方框解决方法
棠樾的博客
09-23 2252
问题：element-ui中的icon都变成了框。
【异常】vue+elementUI图标变成方框问题
seowen的开发 小本子
04-01 2142
前端在打包部署到服务器上后，原本在本地正常显示的图标变成方框了，在网上查了查资料后发现有两个原因，一是打包后静态资源路径问题，这个解决办法网上很多， 这里就不讲了，二是静态资源跨域问题，在nginx配置文件加入以下片段重启nginx服务器成功解决 location ~* \.(eot|otf|ttf|woff|woff2)$ { root /home/app/; add_header Access-Control-Allow-Origin *; } ...
vue-cli的webpack打包，icon无法正确加载
weixin_33819479的博客
07-20 333
今天vue-cli打包完发现加载不出font awesome;路经和奇怪，js,css，img都正确加载； 首先正确加载静态资源需要将config中的index.js中publicPath:'./'; 而font awesome的坑再于webpack对文件打包大小有限制（此处怪我没有好好学webpack）; 而我发现我的font文件打包后竟有400k！！！！！ 需要修改webpack.ba...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值