学无先后,达者为师

网站首页 前端文档 正文

ElementUI(11)打包后查看线上界面?打包后样式出错,怎么办?

作者:我是只菜狗 更新时间: 2022-01-07 前端文档

这俩天,隔壁大哥,发现我打包后发布线上的项目页面样式?出现了问题(vue+ElementUI),比如?表格的边框线不见,出现滚动条后表格不对齐,等等。


(1) 首先我们要查看项目打包上线的样子

??

1️⃣cmd执行以下命令

cd d:\test   //项目目录
npm run build

2️⃣Windows+x打开Window PowerShell(管理员)

//如果是第一次进入安装,出现其他问题自行百度
set-ExecutionPolicy RemoteSigned  //y
get-ExecutionPolicy   //出现RemoteSigned代表成功
npm install http-server -g 
//以后就不用再执行上面了
cd d:\test\dist  //找之前的项目的dist该目录
http-server   //就会出现模拟线上地址了

(2)样式错乱的解决办法???对比本地和线上的css

??

1️⃣在浏览器中对比:本地和线上的css。是否被你没有scoped的样式给全局覆盖了,要不然去全局里更改,或者把单页面没有scoped的进行重构。针对具体的搜能搜到。

2️⃣还有一种莫名情况是ElementUI版本问题,回退到2.14.1我的css问题就全解决了。【但是确保自己以前是在2.14.1版本没问题,升级后产生的问题】
【版本导致的css好像因为是它每个版本的样式不太一样,如果有知道的可以评论讨论一下啵】

如果你要改版本就:
✅1 . 查看package.json和package-lock.json中element-ui版本

npm uninstall element-ui   //卸载当前版本
npm i element-ui@2.14.1    //安装对应版本

✅2 . 再次查看package.json和package-lock.json中element-ui版本是不是对应下载的,是就代表安装成功✍。


真希望ElementUI建个客服交流群,然后ElementUI的技术人员可以帮助解答,大家可以讨论就蛮好的。可能我太菜?了,我再努努力,动动我的?小脑袋瓜。给我冲!给我加油,然后赚钱我就买猫咪?!!!而且这样我的博客就有图片和封面啦哈哈哈?。

原文链接:https://blog.csdn.net/weixin_49567496/article/details/122102624

栏目分类
最近更新