Vite/Vue项目更新后PrimeIcons在远程服务器显示异常

问题背景 #

• 已更新Vue、PrimeVue、PrimeIcons、PrimeFlex及Vite版本，并新增功能
• 更新前远程服务器运行正常；更新后本地开发机（macOS）、本地Staging服务器（Ubuntu 22）均正常，仅未参与更新的Ubuntu 20.x远程服务器图标显示乱码

部署流程 #

• 使用Vite的build命令构建dist文件夹，复制到对应服务器后由NGINX提供服务（远程服务器NGINX未做修改）
• 本地开发机用HTTP服务；本地Staging服务器配置NGINX+本地证书提供HTTPS服务，两者NGINX配置几乎一致

排查情况 #

1. SSH登录本地Linux，用cat -A查看primeicons-358f66d8.css，本地与远程服务器内容完全一致：
   • 本地Staging服务器内容：

     .pi-home:before{content:"M-nM-$M-%"}.pi-spinner:before{content:"M-nM-$M-&"}$
     

   • 远程服务器内容：

     .pi-home:before{content:"M-nM-$M-%"}.pi-spinner:before{content:"M-nM-$M-&"}$
     

2. 通过Chrome开发者工具查看Sources中的assets/primeicons-358f66d8.css，本地与远程存在差异：
   • 本地Staging服务器：

     .pi-spinner:before {
         content: ""
     }
     

   • 远程服务器：

     .pi-spinner:before {
         content: ""
     }
     

• 远程服务器显示的乱码为�，Network面板无资源加载失败，控制台无报错，Vite构建过程无警告或错误

解决思路 #

1. 修正NGINX编码配置 #

Ubuntu 20.x的NGINX默认可能未明确设置UTF-8编码，导致CSS中的Unicode字符解析错误。在远程服务器的NGINX配置（http/server/location块）中添加：

charset utf-8;

添加后重启NGINX：

sudo systemctl restart nginx

2. 确保文件二进制传输 #

复制dist文件夹到远程服务器时，避免编码转换。推荐用rsync进行二进制传输：

rsync -avz --delete ./dist/ user@remote-server:/path/to/your/server/directory/

3. 检查并设置系统默认编码 #

确认远程Ubuntu 20.x服务器的系统编码为UTF-8：

locale

若编码不符，执行以下命令设置：

sudo locale-gen en_US.UTF-8
sudo update-locale LANG=en_US.UTF-8

设置完成后重启服务器或重新登录SSH会话。

内容的提问来源于stack exchange，提问作者colinbes