老铁们，今天咱聊聊这个Vue 3字体乱码的事儿，说实话，这玩意儿让我调试到怀疑人生啊！那什么那个...先说说背景吧。

咱们团队Zui近把个大型Vue2项目升级到Vue3+Vite了元素UI换成Plus，Vxe表格啥的全dou升级了。本来以为Neng高高兴兴完事儿，结果测试同学反馈来一个神奇问题：字体偶发乱码！

哎呦喂，这乱码可真奇葩啊！有时候正常显示"√"符号，有时候就变成""这样的乱码。Zui搞笑的是这还特么是偶发的！刷新几次可Neng正常，再刷几次又乱了。害我差点以为自己眼花。

kan一下对应的CSS代码：

.vxe-table-icon-checkbox-unchecked:before {
    content: ""; // 乱码
}

预期应该是：

.vxe-table-icon-checkbox-unchecked::before {
    content: "√"; // 正常
}

不对不对不对...一开始我想着是不是CSS文件有问题？于是去docker里下载下来对应的CSS文件本地测试。结果发现...

在测试机上：第一次请求首个TCP包包含字节A~B → 嗅探器认为是GB2312编码；第二次请求首个TCP包包含字节A~C→ 嗅探器就认为是Windows-1252编码。哈哈哈这谁Neng想得到啊？

咱就是说...为什么同样的CSS文件会有时这样有时那样呢？查了一下Response头：

content-type: text/css

后来突然想起来以前听说过什么TCP分包影响编码嗅探的事情。于是赶紧用Wireshark抓包验证...

原来每次请求的TCP分包边界不固定，导致嗅探器"kan到的初始窗口"不同，输出结果也不同。

说实话...这才是Zui让人哭笑不得的地方！当CSS文件包含中文注释或内容时某些字节恰好落在GBK/Windows-1252编码范围内。

而浏览器的编码嗅探算法不会等整个文件下载完，它只扫描首次可用的字节块来Zuo判断。Ru果样本太小或者恰好命中关键点...呜呜呜你懂得。

""这种乱码就是典型特征：Unicode中这些符号与GBK/Windows-1252有重叠部分。所以才会出现这种奇葩现象：刷新几次就在这两个编码格式之间随机切换。

.vxe-table-icon-checkbox-unchecked:before{content:"顪�"}


.vxe-table-icon-checkbox-unchecked::before{content:"√"}

.vxe-table-icon-checkbox-unchecked:before{content:""}

你kankan这些不同表现形式！真的是一场闹剧啊！ 解决方案探讨

nginx配置修改:
location ~ .css$ {
    add_header Content-Type "text/css; charset=utf-8";
}

Vite构建配置:
export default defineConfig({
  css: {
    charsetRecognition: false,
    charsetInclusionInOutputCssFilesWhenNeededOnly:true
  }
})

前端代理配置:
// vite.config.js
server:{
  proxy:
}