vite打包部署图标偶尔乱码的问题及解决过程
更新时间：2025年12月17日 09:45:07 作者：chongbicheng
文章介绍了在使用Vite+Vue3项目打包时遇到的自定义图标偶尔乱码问题的解决方法,通过研究vite.config.js的配置项,发现将cssMinify设置为false可以解决图标乱码问题,同时并不会显著增加打包文件的大小
vite+vue3项目打包后，生产环境出现自定义图标偶尔乱码的问题，网上收集了一些方法：
1、修改sass版本至1.39.0，vue.config.js中增加
css: {
preprocessorOptions: {
sass: {
sassOptions: {
outputStyle: 'expanded',
},
},
},
},结果：不确定是不是只支持vue2，在vite.config.js中加了没效果
2、改为使用node-sass
结果：node-sass安装比较麻烦，不采用
3、研究了一下vite.config.js的各个配置项
官方文档：Vite官方中文文档
在文档中找到了构建选项中的cssMinify属性，设为false即可不对css进行压缩
// vite.config.js
export default defineConfig({
build: {
cssMinify: false,
}
})结果：cssMinify设置为true时，图标会变成不知名符号：
cssMinify设置为false时，图标是正常的unicode编码：
因为设置了css不进行压缩，为了避免打包文件过大，记录了两种情况下的css打包大小：
cssMinify设置为true时：
cssMinify设置为false时：
对比可以发现，打包大小差距不是很大，因此使用了此方案。
ps：如果设置的是minify:false,则会将js和css都不进行压缩，js不压缩将会增加比较多的打包体积
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
今天小编就为大家分享一篇vue设置导航栏、侧边栏为公共页面的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
解决vue.js出现Vue.js not detected错误的问题
这篇文章主要介绍了解决vue.js出现Vue.js not detected错误的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要给大家介绍了关于vue2+elementUI实现下拉树形多选框效果的相关资料,这是最近的工作中遇到的一个需求,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-07-07
这篇文章主要给大家介绍了关于vue3 element plus按需引入最优雅的用法,以及关于Element-plus按需引入的一些坑,文中通过图文介绍的非常详细,需要的朋友可以参考下2022-03-03
这篇文章主要为大家介绍了Vue之过滤器，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助,希望能够给你带来帮助2021-11-11
这篇文章主要为大家详细介绍了Vue实现动态控制表格列的显示和隐藏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
vue3中如何通过ref和$parent结合defineExpose实现父子组件之间的通信
这篇文章主要介绍了vue3中通过ref和$parent结合defineExpose实现父子组件之间的通信,Vue3中通过ref和$parent的结合使用，及defineExpose的方法，可以非常便捷地实现父子组件之间的通信，需要的朋友可以参考下2023-07-07
这篇文章主要介绍了Vue批量图片显示时遇到的路径被解析问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
这篇文章主要介绍了vue.js 实现评价五角星组件的实例代码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-08-08
这篇文章主要介绍了Vue中使用插槽（slot）、聚类插槽，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
最新评论