浏览器刷新会出现满屏乱码字符，刷新成功后就会出现页面
检查Doc标签页（Chrome DevTools 里专门显示页面主文档请求的地方，它在 Network 面板的顶部标签栏里）
发现在Preview预览当中就出现了乱码
发现Response当中HTML 源代码直接嵌入了PNG图片的二进制乱码
导致这个问题的真凶
1.首先是把png图片和svg都放在一个icons文件夹当中
2.在vite.config.ts当中写入了svgBuilder('./src/assets/icons/'),
因为 svgBuilder 只会处理 SVG 文件，但你文件夹里有 PNG 图片，它不认识 PNG，就直接把图片的二进制内容当成文本塞进页面里了 → 于是页面出现 �PNG 乱码！
svgBuilder 是干什么的？
它的作用只有一个：把 /src/assets/icons/ 里的 .svg 文件，自动变成组件，注入到页面 <body> 里。但是他只认识SVG。
解决方法
1.不修改配置文件 不要把png和svg放在一个文件夹当中，尤其是在配置文件当中svgBuilder声明的
2.修改配置文件，注释svgBuilder
总结
这个问题是在电脑关机后 重新运行这个项目产生的，是因为Vite 有缓存，电脑关机/重启都会将vite的内存缓存清理 当重新运行该项目，没有缓存了 必须重新生成，svgBuilder识别到了png图片，将二进制乱码塞进 HTML，所以就看到乱码
扫一扫
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
