一个vite的页面每次刷新的效果不一样
大家看这是一小伙伴发来的bug
同样一个页面每次刷新的效果不一样
就是里边内容区的这左右两个容器
时高时矮
大家看啊刷新
看看变矮了，再刷新就高了
那这种问题怎么来找呢
首先我们可以利用这个对比的插件
（样式对比的插件哈）
比如说就这个层我们先把它
加入到这个CSS Diff， 加入一个compare
然后呢我们刷新
大家看等它不对了的时候呢我们再compare
但是啊这个例子里
这种对比有没有发现什么端倪哈
所以呢我们再换一种方法：
删代码！我们怎么删呢
它不是左右结构吗
我们把左右里边内容全部删掉
这个是left
把这里边left删掉
这right我们把right这里边也删掉
只留两个空的层
大家看然后我们再试刷新
还是有问题
说明他跟里边这个没关系
那怎么办呢
我们继续回到他上…（一级组件）
因为这里边没什么可删的了
我们再回到外层
把外层的这个该删的也都删掉
比如说我们把header删掉啊
header删掉
他这个高度变了因为他用grid布局
所以呢
我们找到这个container的样式啊
我们把这个样式改一下
把这个grid的这个布局设定删掉
好我们再来刷新他还是有问题
好我们继续删
把这aside就左边这个菜单也删掉
同样呢删掉我们还需要把这个
归的默认的设定删掉我们再来试
大家看 还是有问题
这就很奇怪了就剩这个面包屑了
我们把这个面包屑删掉然后呢
我们再刷新
大家看 这个有问题但他不是这么高…
来变化了
我们把这个content的这个grid也去掉
大家看 这就好了
所以呢问题就说明出在这个
grid-auto-rows上面
后来我仔细一看原因是这个content
类名冲突了
大家看外层也有叫content
我们看这个组件内部
他也有一个类叫content
而且呢他在下边
也对content进行一些样式的设置
我们先试一下哈
我把这个外层的这个content改个名
首先呢我这样我在这先撤回一下
把这个改的代码都撤回来
然后呢我们把这个content改成layout
content同样下边也是叫点layout content
好我们再回到页面刷新
大家看这样的问题就解决了
为什么类名冲突
会导致它每次刷新效果不一样呢
其实原因是它使用了vite
vite它是按需加载的
所以它没法保证这个组件加入（页面引入）的顺序
所以啊导致
它这个页面上加载CSS的顺序不一样
有时候呢
后边写的这个CSS在前面
也就是说有时候它在前面
有时候呢它在前面
所以啊针对这个gird-auto-rows啊
它有可能采用的是这个auto-rows
有可能采用的是这个auto-rows
所以就会导致
每次刷新效果是不一样的
最后更新于