vite打包部署图标偶尔乱码的问题及解决过程

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不压缩将会增加比较多的打包体积

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。