一、问题描述

使用vue+element-ui搭建网站时，打包到线上会有偶发性icon乱码的问题，
检查文件dist/css/app.xxx.css，发现所有的图标样式content的文本均异常。如：.el-icon-ice-cream-square:before{content:“”}。所以我们打包后的样式文件是有问题的。

二、解决方案

升级sass、配置vue.config.js

sass版本要在1.39.0以上

npm install sass@1.39.0

vue.config.js 增加css配置


devServer: {port: port,open: true,overlay: {warnings: false,errors: true},proxy: {'/api': {target: '',ws: true, // proxy websocketspathRewrite: {'^/api': '/'}}},disableHostCheck: true,
},
// 有用代码开始
css: {loaderOptions: {sass: {sassOptions: {outputStyle: 'expanded'}}}},// 有用代码结束

三、检查修复结果

重新打包后，检查文件dist/css/app.xxx.css，发现所有的图标样式content的文本正常了。例：el-icon-moon:before{content:“\e6f0”}.看到这个就代表修复成功了

vue、Element-UI 图标偶发性乱码问题解决方案相关推荐

Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）
这篇博客主要介绍树形控件的两个小小的功能: 下拉菜单输入过滤框以CSS样式为主,也会涉及到Vue组件和element组件的使用. 对于没有层级的数据,我们可以使用表格或卡片来展示.要展示或建立层级 ...
【前端】Vue+Element UI案例：通用后台管理系统-代码总结（已开源）
文章目录前言项目文件目录 api mockServe home.js permission.js index.js mock.js user.js assert components Common ...
本地使用element ui 图标不显示或显示错乱的问题
本地使用element ui 图标不显示或显示错乱的问题官方使用方式  <link rel="stylesheet" href=&qu ...
vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
Vue + Element UI 实现登陆注册基本demo实例
Vue + Element UI 实现权限管理系统前端篇(二):Vue + Element 案例导入项目打开 Visual Studio Code,File --> add Folder ...
【Vue 快速入门】从零开始搭建 VUE + Element UI后台管理系统框架
[Vue 快速入门]从零开始搭建 VUE + Element UI后台管理系统框架前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条 ...
基于vue(element ui) + ssm + shiro 的权限框架
zhcc 基于vue(element ui) + ssm + shiro 的权限框架引言心声现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...
【vue开发问题-解决方法】（五）vue Element UI 日期选择器获取日期格式问题 t.getTime is not a function
[vue开发问题-解决方法](五)vue Element UI 日期选择器获取日期格式问题 t.getTime is not a function 参考文章: (1)[vue开发问题-解决方法](五) ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出
文章目录目标代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...

vue、Element-UI 图标偶发性乱码问题解决方案

vue、Element-UI 图标偶发性乱码问题解决方案

一、问题描述

二、解决方案

三、检查修复结果

vue、Element-UI 图标偶发性乱码问题解决方案相关推荐

最新文章

热门文章