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-router 报错NavigationDuplicated的解决方法
这篇文章主要介绍了Vue-router 报错NavigationDuplicated的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
本文主要介绍了Vue.js的相关知识。具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
这篇文章主要介绍了vue单页面如何解决多个视频同时仅能播放一个问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
访问百度音乐API需要传递音乐类型参数，而这些参数是存在musictype.json中，现在在组件listcate.vue需要获取json数据，如何实现呢，下面小编给大家带来了Vue中如何获取json文件中的数据，感兴趣的朋友一起看看吧2022-09-09
vue项目打包是我们日常经常遇到的,下面这篇文章主要给大家介绍了关于Vue打包后不同版本详细解析的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下2022-12-12
本文主要介绍了vue组件中重新渲染的3种方式小结,主要包括改变key,v-if,vm.$forceUpdate()这三种,具有一定的参考价值,感兴趣的可以了解一下2023-10-10
这篇文章主要为大家详细介绍了vue使用echarts实现折线图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
今天小编就为大家分享一篇初学vue出现空格警告的原因及其解决方案，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
默认情况下,写在.vue组件中的样式会全局生效,因此很容易造成组件之间的样式冲突问题,本文就来介绍一下如何解决此问题,感兴趣的可以了解一下2023-12-12
在 Vue.js 开发单页面应用（SPA）时,组件的频繁创建和销毁会带来一定的性能开销,为了优化这一问题,Vue 提供了 keep-alive 组件,本文将深入剖析 keep-alive 的实现原理,需要的朋友可以参考下2025-10-10
最新评论