elementui简单案例

## Question（提问）之所以会遇到这个问题，是因为之前一直使用的是vue-cli@3版本(v4.2.1)，现在升级到vue-cli@4后(v4.4.0)，同一套代码，运行到界面上存在的差异如下： #### Screenshot or Gif（截图或动态图） 1. 在以前的项目中预览效果为（before） ![image](https://user-images.githubusercontent.com/33254984/96350920-c8ab6700-10ea-11eb-9277-3dc0c0f32eaa.png) **** 2. 升级后的差异，现在的项目中预览效果为（after) ![image](https://user-images.githubusercontent.com/33254984/96350952-10ca8980-10eb-11eb-9c84-2a16406d5ae0.png) 看得出来，elementUI之间的间隔没有了，不科学，同一套代码，居然有这样的差异！于是跑了两个项目，一个升级前，一个升级后，在Chrome中认真的看css computed各种差异，经过好久，依然未找到差异开了Firefox，终于找到了差异： 1. 在以前的项目中预览效果为（before） ![image](https://user-images.githubusercontent.com/33254984/96351137-00ff7500-10ec-11eb-8809-a2ecf4af2d06.png) **** 2. 升级后的差异，现在的项目中预览效果为（after) ![image](https://user-images.githubusercontent.com/33254984/96351155-21c7ca80-10ec-11eb-8d0c-3d27a3005f25.png) 很显然，这了多了空白元素，占一点点缝隙，这样好看多了但是，强迫症不能忍受，我决定看看差异到底在哪，开始尝试替换element包版本，经过好久的分析，各种排查，时间浪费的不少，现在都快3点了，问题都没解决后来直接把原项目备份，仅仅保留node-modules文件夹，将新项目拷贝到文件夹，依然不生效，然后改动了一下vue.config.js后运行居然发现HTML元素之间又有缝隙了，变成了after #### Link to minimal reproduction（最小可在线还原demo）然后手敲一个demo运行一下，引用了cdn，干起一波 ```html elementui简单案例

``` ![image](https://user-images.githubusercontent.com/33254984/96351375-715ac600-10ed-11eb-8b7a-373674ae9754.png) 发现正常(after)，然后改一下HTML。压缩了一下HTML，发现又不正常了(before)，类似： ```html

``` #### Other relevant information（格外信息）我的猜测是可能是打包的时候让HTML部分压缩了，但是并没有找到问题的原因，看了一下大家的issue，有的贴图是before状态的，并没有提及此问题，这里提出来大家看看有没有解决过这样的问题，看看是否有好的解决方案

升级到vue-cli@4后，Vue文件打包会跟之前的版本存在UI差异？(element-ui)强迫症难受~ #3465

Company

Community

Support

Connect