打包发布到线上,页面偶发性出现图标乱码问题,再次刷新页面后,又可正常显示
先说一下出现步骤:
线上测试环境(即代码build打包发布的环境)使用F12打开调试模式,此时刷新页面,图标乱码。
------------------
解决步骤
先看一下打包文件dist/css/app.xxx.css![image.png](https://upload-images.jianshu.io/upload_images/26856338-142b872eceab5862.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)icon打包的content全部是乱码
目前找到的解决方案是将sass的版本升级为1.39.0版本, 然后配置vue.config.json的css打包方式
![image.png](https://upload-images.jianshu.io/upload_images/26856338-1355f4058b787e08.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)![image.png](https://upload-images.jianshu.io/upload_images/26856338-04854708b7709cdc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
```
css: {
loaderOptions: {
sass: {
sassOptions: {
outputStyle: 'expanded'
}
}
}
}
```
最后重新打包上传线上就可以了
vue项目打包发布后线上出现icon乱码
最新推荐文章于 2024-07-26 20:46:33 发布