nginx Vite/Vuejs primeicons未在部署的服务器上正确显示

qmelpv7a  于 2023-06-05  发布在  Nginx
关注(0)|答案(1)|浏览(236)

更新vite/vue项目后,primeicons不再在远程服务器上正常工作,但在本地开发机器和本地暂存服务器上工作正常。
我更新了vue,primevue,primeicons和primeflex以及vite,并添加了一些新功能。
更新之前,远程服务器按预期运行。更新后,我的开发系统(macos)和本地暂存服务器(Ubuntu 22)上的一切都运行得很好,但通过远程后端服务器(Ubuntu 20.x服务器,未在此过程中更新)显示图标乱码。
部署包括使用vite的build命令构建dist文件夹,然后将此dist文件夹复制到通过NGINX提供dist文件夹的相关服务器(在我的远程服务器上尚未更改/更新)
我的开发机器(macos)只提供http而不是https,我的本地staging服务器配置了nginx来提供https和本地证书。远程服务器和staging服务器具有几乎相同的nginx配置。
到目前为止,调查没有发现什么原因--我的调查结果是:

SSH进入本地linux。

使用cat -A查看primeicons-358f66d8.css的内容,显示与远程服务器相同的内容。

  • 本地分段服务器
.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-&"}$

连接chrome浏览器并使用它的webinspector,查看源代码assets/primeicons-358f66d8.css,显示本地系统和远程linux系统之间的不同条目。

  • 本地分段服务器
.pi-spinner:before {
    content: ""
}
  • 远程服务器
.pi-spinner:before {
    content: ""
}

这个是我看到的图标,但只在远程服务器上。
Webinspector的网络没有显示加载任何文件失败,也没有向控制台报告错误。
Vite的构建过程也不会抛出任何警告或错误。

42fyovps

42fyovps1#

最后,我注意到在我的远程服务器上,我没有在nginx配置中将charset设置为utf-8。进行此更改解决了问题。
我不知道为什么它在更新之前已经工作了好几年,我也认为UTF-8是默认的字符集。

相关问题