vue项目element-ui组件打包后组件显示方框解决方式

最新推荐文章于 2025-01-27 07:45:00 发布
原创 最新推荐文章于 2025-01-27 07:45:00 发布 · 2.6k 阅读 · 1 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
vue

当前文章被收录于：

vue
19 篇文章 3 人学习
订阅专栏 查看详情
本文介绍了解决Vue项目中打包后分页组件和下拉框组件箭头显示为方框的问题。通过修改build/utils.js文件中的publicPath路径设置为'../../'，可以有效解决打包后的组件显示异常。

    在我们对vue项目进行打包的时候,会遇到一些组件问题,比如说分页组件的箭头,下拉框组件的箭头打包完成后会出现方框显示的问题.具体解决办法如下:

1.找到项目底下build/utils.js文件

2.添加  publicPath: '../../'

完成后再进行项目打包就可以了

 

标签
#vue #vue.js #前端 #webpack
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 3245
这里这个limit 配置项会指定文件大小，小于limit的图片无法生成图片并以64格式引入，大于limit的图片将以url加载。
vue打包发布element ui icon变成方框了
Sun_Maple_jw的博客
12-21 2349
有时候我们在本地写好的vue 图标显示都正常 只要是发布上线就会变成如下的小框框 解决办法:在build文件中找到utils.js 加上一行 publicPath：'../../' 就可以解决了 完美解决了
Vue 不加载字体包 导致elementUI的icon显示为正方形小框框问题解决
wuyxinu的博客
06-08 6965
在一次开发任务中遭遇的一个问题 正常使用 element-ui的icon时 却发现不知道为什么显示都为正方形小框框于是，我就将element-ui 版本由 2.12.0 提升为 2.15.2 但是无法解决这个问题 失败Vue.config.js 配置问题 也就是 webpack的配置问题 通过将vue-cli预设配置弹出的操作，我查看了一下 Vue-cli 预设Webpack配置，和我自己的webpack配置，没看出问题来。感觉一切正常...
vue打包 element-icons.woff 和element-icons.ttf 字体文件路径错误，导致icon图标显示成小方块的问题
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
09-25 3390
vue打包 element-icons.woff 和element-icons.ttf 字体文件路径错误，导致icon图标显示成小方块的问题
饿了么神级UI组件库——Element-UI使用指南
热门推荐
Java修炼记
03-16 4万+
目录 1.Element-UI介绍 2.Element-UI使用 2.1 命令行方式安装 2.2Vue-CLI工程改造 2.3 安装axios 3. 案例：用户登录界面制作 3.1 Dialog对话框组件 3.2 创建login.vue 组件 3.3 配置路由 3.4 修改App.vue 3.5 编写登录功能 3.6 Postman搭建mock server 3.7 登录成功后跳转 1.Element-UI介绍 element-ui 是饿了么前端出品的基于 Vue...
[已解决]electron-builder vue 打包后iconfont/element-ui字体图标不显示问题
搬砖的码
05-27 9744
element-ui字体图标无效是因为文件引用路径错误，将其样式资源作为静态资源打包，就可以解决。
Vue引入并使用Element-UI组件库的两种方式
见证自己学习,成长的记录
01-10 1万+
在开发的时候，虽然我们可以自己写css或者js甚至一些动画特效，但是也有很多开源的组件库帮我们写好了。我们只需要下载并引入即可。vue和element-ui在开发中是比较般配的，也是我们开发中用的很多的，下面就介绍下如何在eue项目中引入element-ui组件库其他的组件库使用也是和上述步骤大同小异的。
Vue中引入Element组件、路由router、Nginx打包部署
2301_79258776的博客
05-09 1639
零基础小白学习Vue脚手架引入ElementUi组件！
Vue与Element-UI
qq_42814867的博客
12-06 2万+
浅谈Vue.jsVue.jsVue.js诞生Vue.js三大核心MVVMMVVVM模型vue实现的MVVM模型组件化组件组件与数据虚拟DOM事件事件监听原生JS与 Vue.js实例实现效果代码对比事件过程Vue.js优点其他注意点Element-UIGUI 工具数据绑定消息相应 Vue.js Vue.js是一套用于构建用户界面的渐进式框架。 渐进式是指，它既可以作为一个库使用，又可以作为一个框架使用 ，两个之间自如选择。库是不具有侵略性，在原有项目可以引入作为第三方依赖使用；框架是具有侵入性的，整个项目是
解决 Vue 项目中 Element UI 组件未注册的问题：从错误排查到撤销操作
最新发布
私聊前往站内信：https://i.csdn.net/#/msg/chat/weixin_44976692
01-27 1万+
在 Vue 项目中使用 Element UI 组件时，正确注册组件是避免错误的关键。通过全局引入或按需引入的方式，开发者可以灵活地管理组件的使用。如果出现问题，及时排查错误并撤销不必要的操作是解决问题的有效方法。本文详细介绍了如何解决 Element UI 组件未注册的问题，并提供了撤销操作的步骤。希望这些内容能帮助开发者更好地理解和解决 Vue 项目中的类似问题。
vue element-ui之怎么封装一个自己的组件
qq_30307645的博客
05-18 1万+
为什么要进行组件封装？ 封装的目的就是为了能够更加便捷、快速的进行业务功能的开发。组件（component）是vue的最强大功能之一，组件可以实现一些类似功能的复用及与其它业务逻辑的解耦。在开发中，我们难免会写很多类似的、重复的代码，有时候两个业务模块有相似的功能，采用复制粘贴已经很省事，但如果涉及的字段或有一些小差别，你也会觉得很烦，毕竟你要从头到尾瞅着去改动。这时候如果把那些相同的功能，抽象...
前端基础篇-前端工程化 Vue 项目开发流程（环境准备、Element 组件库、Vue 路由、项目打包部署）_vue element 开发
2401_84413180的博客
04-27 1226
Element 是饿了么团队研发的，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。组成：组成网页的部件，例如 超链接、按钮、图片、表格、表单、分页条等等。组件 | Element正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】xe 可执行程序运行起来。**部署：将打包好的 dist 目录下的文件，复制到 nginx 安装目录的 html 目录下。
在vue项目中使用Element-ui基本教程
Im_xiaopei的博客
10-06 3万+
element-ui是饿了么推出的一个开源ui库，它不依赖于vue。但是却是当前和vue配合做项目开发的一个比较好的ui框架。 官网：https://element.eleme.cn/#/zh-CN 今天分享一下这个插件的基本使用， 1.创建一个项目，并安装element-ui插件 创建项目参考https://blog.csdn.net/Im_xiaopei/article/details/120618154?spm=1001.2014.3001.5501 安装element-ui 打开终端，输
Vue中如何使用Element-UI组件
LoveSongi的博客
10-11 1817
Vue中如何使用Element-UI组件 一、CDN 目前可以通过 unpkg.com/element-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。 <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 引入组件库 --> <script src="https://unpkg.c
vue2项目如何引入element组件库以及如何使用element组件库
jiuliangliang的博客
08-06 1998
vue2项目引入element组件库
【Vue】Vue集成Element-UI框架
颜颜yan_的博客
03-23 2900
点击进入Element-UI 是一套基于 Vue 2.0 的桌面端组件库，由饿了么前端团队推出并进行开源。它提供了丰富的 PC 端组件，简化了常用组件的封装，大大降低了开发难度，使开发人员能够轻松构建功能强大、风格统一的页面。Element-UI 与 Vue.js 集成非常紧密，开发者可以轻松地将 Element-UI 的组件嵌入到他们的 Vue.js 应用程序中。今日之学习篇章已然落笔，愿诸君有所收获。🤩倘若您对此深感兴趣，不妨关注此专栏，新知将持续涌现，与您共舞思维的华章。😎。
在vue项目中使用Element-ui框架
路漫漫其修远兮，吾将上下而求索
06-14 5715
1.搭建vue项目 计算机环境:Nodejs+npm+vue 本人目前使用的版本： 使用vue脚手架（即vue/cli）创建项目，只需一行代码： vue create projectName 网上有其他的创建方式，如: vue init webpack projectName 两种方法创建出来的项目目录结构不相同，前者项目版本>3，后者项目版本是2.x，大家可根据自身需求选择对应的安装方式。目前第一种安装方式也是官网最新的安装方式。 实例演示： 如上图所示，第一个红圈即.
Vue中使用CDN的方式引入echarts、axios、Element UI、swiper
ygkyufcl的博客
03-24 7653
原本我所有的插件都是npm安装，然后使用的时候使用import引入的，，，但是在我打包时发现总共没有几个页面可能由于有大量的图表，打包之后20M左右 这样肯定是不行的，我就使用按需引入，但还是有17M左右 最后我就想起来使用CDN引入了，，果然最终文件大小就27kb html.js <link rel="stylesheet" href="https://unpkg.com/elemen...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值